11/08/04
13Native (looking) Firefox OS X widgets
(File under ‘obsessive browser theming’)
Following on from the previous post, I’ve made some improvements to the form widgets CSS for OS X. Phillipe pointed out to me how to add background images to <input> tags by setting the border to solid 0px white, and the background colour to transparent. So, buttons, textfields and textareas can now look like this in Firefox:
If you’d like to have a go at implementing this, you can download all the images and css here. All you have to do is put the files into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).
Pros:
- The button includes an active state that shows the dark graphite colour when the button is clicked. I’ve also removed the dotted inner ring around the button text when its selected.
- I’ve also used original OS X resource files to make the button images. This means they have alpha transparency and will ‘sit’ on any coloured background.
Cons:
- To acheive the button look, I’ve taken an approximate ‘average’ size button. This won’t scale when the text size is increased, or the text is too large for the button. You’ve got about 100 pixels and thats it. Its enough for phrases like “Google Search” but not quite enough for “I’m feeling lucky”.
- Also, if a webpage has already got some styling associated with widgets, then things get a bit messy.
So its a step closer, and it does make a difference to using Firefox. Any PC reader (and maybe many mac users) probably don’t get why this is so important. Select menus, radio buttons and checkboxes are harder to alter though, so there’s a task for someone with more time than me!
Tags: 
Previous
Download our vCard
Scot said 1471 days ago:
Thanks Jon, I might just implement these on my site!Jo-Pete Nelson said 1471 days ago:
I’ve got it implimented right now. I might take it off after a little bit, but I’ll probably replace it with something else. Thanks for the great work!Chris Vincent said 1470 days ago:
When Firefox supports CSS3’s generated content module, it should be possible to scale the form buttons with sliding doors by adding an extra element within theinput. In fact, a lot of sweet new things will be possible when that module is finalized and widely supported, and will very much help us avoid adding extraneous “hook” elements to our document markup.Samuel Le Berrigaud said 1470 days ago:
I added input[type=”password”] to have the same style as classic text fields, for password fields… I think it was missing.Jon Hicks said 1470 days ago:
Jo-Pete: I’m not sure what you’re talking about!Chris – I’d tried using pseudo :before and :after to add the rounded ends, but this didn’t seem to work with the input tag. I’d like to know if anyone else has any trick of getting this to work.
Samuel: Ah yes that one! Firefox doesn’t specify that one either so I decided to leave it out.
Philippe said 1470 days ago:
It should be possible to do someting to the Reset, Submit buttons (using some Sliding Doors technique) with the following selector (lifted out of the forms.css):*|*::-moz-button-content {}
I just tried giving it a red background, and it works (on the latest FF nightly). Combine it then with input[type=”text”], etc.
Regarding the path to image(s), just drop the images in the same location as the userContent.css file, and call the images as
selector {background:url(image.png)}
Jon Hicks said 1470 days ago:
Thanks Philippe I’ll try that out.David said 1470 days ago:
When selecting the buttons by tabbing, you get no visual indication that the button is selected. I would suggest also creating an image for the “active” state.David said 1470 days ago:
sorry. wrong state, but I still have the problem mentioned while testing on the google page.John said 1470 days ago:
Hi Jon,I happened to browsed into your site. I must really say you’ve got a tidy piece of work here!
Anyway, I got here when I was searching for some sample sites that implemented TextPattern. Well, I’m new to all this and have looked up to all the forums, tutorial sites and all.
Keep up the nice work! :)
Chris Pederick said 1470 days ago:
Jon: I’d tried using pseudo :before and :after to add the rounded ends, but this didn’t seem to work with the input tag.I hit this problem with the Web Developer extension and apparently it’s because the input tag is a replaced element.
See this bug for more information. I filed it specifically about images, but the issue is the same as for input elements.
Chris Pederick said 1470 days ago:
Oops…the link that showed up in preview got squished. Here’s the bug:http://bugzilla.mozilla.org/show_bug.cgi?id=245633
Tom said 1468 days ago:
@Samuel, how did you get the passwords to have regular text? the font property?