css selector to match an element without attribute x
Css SelectorsCssCss Selectors Problem Overview
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?
Css Selectors Solutions
Solution 1 - Css Selectors
:not
selector:
input:not([type]), input[type='text'], input[type='password'] {
/* style here */
}
Support: in Internet Explorer 9 and higher
Solution 2 - Css Selectors
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.
Solution 3 - Css Selectors
Just wanted to add to this, you can have the :not selector in oldIE using selectivizr: http://selectivizr.com/