Reset the styling for input fields to browser defaults

I need to style all the input fields but one. So i have set a rule for al开发者_如何学编程l 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/

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.

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).

I'm not sure if you generate them from codebehind or hardcode them into the website, but I'd recommend that you use either a class or a name attribute on the input fields you want to look different, like this: http://jsfiddle.net/VeXgw/

I don't believe there is a simple way to unset styles because technically there is no default set style. I think your only chance would be to write some browser specific style rules with javascript to try to make it look like the defaults for each browser.

The better method may be to give all of your inputs (except the searchfield input) a class that you use to style them instead of styling ALL input tags.

Can you use an ID or Class for that single link?

Update:

Try using

border-style:inset;

should do the trick...

http://jsfiddle.net/N5KKH/10/