css selector to match an element without attribute x [duplicate]

Question

I'm working on a CSS file and find the need to style text input boxes, however, I'm running into problems. I need a simple declaration that matches all these elements:

<input /> <input type='text' /> <input type='password' /> 

... but doesn't match these ones:

<input type='submit' /> <input type='button' /> <input type='image' /> <input type='file' /> <input type='checkbox' /> <input type='radio' /> <input type='reset' /> 

Here's what I would like to do:

input[!type], input[type='text'], input[type='password'] {    /* styles here */ } 

In the above CSS, notice the first selector is input[!type]. What I mean by this is I want to select all input boxes where the type attribute is not specified (because it defaults to text but input[type='text'] doesn't match it). Unfortunately, there is no such selector in the CSS3 spec that I could find.

Does anyone know of a way to accomplish this?

Answer 1

:not selector:

input:not([type]), input[type='text'], input[type='password'] {     /* style here */ } 

Support: in Internet Explorer 9 and higher

Answer 2

For a more cross-browser solution you could style all inputs the way you want the non-typed, text, and password then another style the overrides that style for radios, checkboxes, etc.

input { border:solid 1px red; }  input[type=radio],  input[type=checkbox],  input[type=submit],  input[type=reset],  input[type=file]        { border:none; } 

- Or -

could whatever part of your code that is generating the non-typed inputs give them a class like .no-type or simply not output at all? Additionally this type of selection could be done with jQuery.