css selector to match an element without attribute x

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 */
}

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.

Answer 3

Here is some detailed info about CSS selectors

Answer 4

A simple hack is to use input[size] as you don't specify a size for anything other than text input.

The only place that this might bite you is if you are using size on type="button" or type="submit"