Dec 21
2012

Making HTML forms and buttons render the same in Safari as in Chrome and FF

During my recent project working on the redesign of Spencer Day’s promotional site, I encountered a maddening cross-browser quirk. A critical component of online marketing is email newsletters, and part of the site redesign was heavily customized sign-up form. After some work, I had a pretty nice looking form that appeared nearly identical in Firefox, Chrome and IE:

ff-form

Safari, on the other hand looked TERRIBLE:

safari-form-bad

It was generated by the following CSS:

It’s always frustrating when one Webkit browser (Safari) doesn’t even look like another Webkit browser (Chrome). In this case it’s clear that Safari ignores the styling provided in form input.button part of the CSS. It took some serious searching to figure out why, but I did. Apple doesn’t allow the styling of “native” buttons. To get a button to be accepted as “non-native”, you can add a background color (even the same color currently in use).

Now the signup form is roughly* the same across all major browsers:

ff-form

safari-form-good

*sloppy screen-shot snipping aside

This entry was tagged , , , .
Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *