Reset the styling for input fields to browser defaults

Question

I need to style all the input fields but one. So i have set a rule for all the inputs on the site.

For the seachfield i need to use the browser default, so i was thinking i could just inherit all the values i have set for the general input fields. (have tried border: none to)

This does not work in FF nor Safari :( The border just gets transparent.

http://jsfiddle.net/N5KKH/1/

Any idea how i could get the default browser styling back?

EDIT: i need the first input field look like the second one: http://jsfiddle.net/N5KKH/2/

Answer 1

You should be using a class on all inputs you want styled rather than a general selector on tag name.

If you cannot control this, you could try to set the input back to the default css properties which are listed here although this is not a nice solution and will probably not actually result in the default appearance of the input box.

CSS3 has the not pseudo class which could be used to select all the other inputs although this is not supported by all browsers. JS abstraction frameworks such as jQuery often allow you to use "not" selector syntax cross-browser although this is much less elegant than a pure html css solution.

Answer 2

EDIT

Actually, it doesn't seem to. Just gives me a solid border. Hold on, seeing what I can play with.

EDITv2

It appears that in CSS3 it can be done using the not pseudo-class. However, there doesn't appear to be a way to bring it back from a styled form element. That being said, try just adding a class to input fields you would like changed, then have it ignore the one you don't want changed.

Alternatively, you could use something like jQuery to select only the elements you'd like styled and apply the class to it or manually add the properties (but now you're adding a JS-dependance).