Native (looking) Firefox OS X widgets is a post on The Hickensian

(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!