Remove default browser styles on form elements

Question

Note: I've tried searching on google, but couldn't find what I was looking for.

Browsers have some default styles they use for rendering form elements, which is different from browser to browser. Is there a way to reset all of the native browser styles for form elements like select, radios, checkbox etc, to make a consistent look across browsers?

I've made a quick example:

form elements http://grab.by/grabs/34db87ee1ad93e031cc72808feb2c8e7.png

As can see the form elements are rendered slightly differently. What I would like, is some styles, that can reset them, to look alike, for IE, Firefox and Webkit.

So how do you do this? A link to a css stylesheet with all the needed styles would be fantastic.

Answer 1

Short answer: you can't.

Long answer: you can, but expect pain.

I've hacked together nice looking Radio buttons, Checkboxes and Selects with 'sleight of hand' javascript + css. Basically, just after an input is loaded I hide it and replace it with labels / divs with events bound to them to make them act like they're the right inputs, and css to make them look that way. The events also update the underlying input so that the correct values are submitted with the rest of the form. If my script barfs or JS is off, the user gets the normal controls.

It wasn't that fun but the result is passable.

I do not look forward to seeing the mess IE makes of it though :)

I had inspiration from:

http://sourceforge.net/projects/selectreplace/?showfeed=code

Answer 2

This is an old question now but adding the CSS rule -webkit-appearance:none may help remove default Webkit styling, e.g. pill shaped buttons on Mobile Safari.