CSS :not selector to target specific types of input

Question

I want to style ALL inputs except for specific types.

For example:

input,
input:not(type='email') {
    background: red;
}

The above doesn't work

So I want all inputs to have a background of red (obviously I don't this is just an example), except for input elements of type email. The type I am trying to target with the :not selector could be different.

Can this be acheived? If not, what is the best solution?

If you're curious I am trying to avoid specifying all types of input that I want to target just so the types I don't want targeting don't get that style.

Niels · Accepted Answer · 2013-07-03 16:58:06Z

5

You have to do it like this: fiddle

input:not([type='email']) {
    background: red;
}

Because if you dont use the [] your not making a selector. Also this does not support all older browsers

answered Jul 3, 2013 at 16:58

Niels

50.1k4 gold badges68 silver badges86 bronze badges

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

1 Comment

Dave Haigh Over a year ago

can multiple types be targetted? e.g. I want all inputs to be red except types email AND number. After some experimenting I discovered it can be done with input:not([type="email"]):not([type="number"]),

haim770 · Accepted Answer · 2013-07-03 16:57:54Z

3

Try:

input:not([type='email'])

Keep in mind though, that by using input, input:not([type='email']) you're actually rendering the condition useless since you're specifying a bare input as well.

answered Jul 3, 2013 at 16:57

haim770

49.2k7 gold badges113 silver badges139 bronze badges

1 Comment

Dave Haigh Over a year ago

can multiple types be targetted? e.g. I want all inputs to be red except types email AND number. After some experimenting I discovered it can be done with input:not([type="email"]):not([type="number"]),

Collectives™ on Stack Overflow

CSS :not selector to target specific types of input

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related