Flat input buttons or fields in Apple’s Safari? Here’s a workaround!

Whilst cross-brower checking my blog design in Apple’s pretty wicked Safari browser, I realised that there were going to be some issues.

Whether or not it’s considered a feature of the highly usable browser, if you set a style of ‘background-color’ on an form input, the default shine and coolness that is Apple’s Aqua - is gone! Gone I say! *Shock, Horror*

Safari seems to as nicely as possible, make the background colour, in the case as shown below, hex code #a8ddf8, literally that colour. Cool you might think? I dunno. Always been a fan of the whole simplicity side of Aqua’s interface - especially the drop-down’s form inputs and how they are custom-designed (very much bullet-style!).

On another matter, In Safari 3 on Mac OSX Leopard, (ahh, Leopard!) if you assign a background color to inputs, Safari likes to remove the aqua-style imprint on the buttons and replaces that with flat-button style to replicate the color you’re you wanted. Ingenious? Annoying? I guess that’s subjective. However, there’s a surefire way to get around it… Either create a new class for inputs with background set to none; .inputsMinusBg { background-color: none; }, or, simply kill the background colour.

Till next time…