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?

jQuery selectors: use .not(). $("[data-plot-id]").not('[data-bean-id]').css({border: '5px solid red'}) — Vael Victus
– Vael Victus, Commented Apr 28, 2018 at 17:05

Iulian Onofrei · Accepted Answer · 2020-10-03 15:56:21Z

674

:not selector:

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

Support: in Internet Explorer 9 and higher

edited Oct 3, 2020 at 15:56

Iulian Onofrei

9,85611 gold badges73 silver badges118 bronze badges

answered Oct 7, 2009 at 18:53

eveliotc

13.4k4 gold badges41 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PRANAV Over a year ago

I have tried for <img alt=" "> img:not[src=""] { visibility: hidden; width:0; height:0; } but not working pls help

Nikita Over a year ago

Anoops, you definitely should create a new question.

Elmer Velasquez Over a year ago

just need to put attribute name; img : not( [ src ] )

Nayuki · Accepted Answer · 2015-12-25 18:57:21Z

31

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.

edited Dec 25, 2015 at 18:57

Nayuki

18.8k6 gold badges61 silver badges84 bronze badges

answered Oct 7, 2009 at 19:33

Tim Santeford

28.3k17 gold badges77 silver badges101 bronze badges

Comments

smets.kevin · Accepted Answer · 2013-02-15 18:21:15Z

11

Just wanted to add to this, you can have the :not selector in oldIE using selectivizr: http://selectivizr.com/

answered Feb 15, 2013 at 18:21

smets.kevin

1,61815 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related