CODEWITHSUNDEEP
css
Houman
Houman

Reputation: 66320

Include/exclude Input formatting by its type

The following css would make all inputs red inside a div class="field_error"

div.field_error input{  
    color: red;
    border: 2px solid #FF0000; 
}

Is it possible to say

case 1) exclude type=button ? case 2) only apply type=text ?

How can I do these two cases?

Thanks,

Upvotes: 1

Views: 1510

Answers (2)

Tom Naessens
Tom Naessens

Reputation: 1837

Case 1: You can use the CSS3 :not() tag to exclude the inputs of the type button:

div.field_error input:not([type=button]) {  
    color: red;
    border: 2px solid #FF0000; 
}

Case 2: This only selects the text inputs and colors them red:

div.field_error input[type=text] {  
    color: red;
    border: 2px solid #FF0000; 
}

Upvotes: 2

Cody Caughlan
Cody Caughlan

Reputation: 32748

Yes, using an attribute selector:

div.field_error input[type=text] {  
    color: red;
    border: 2px solid #FF0000; 
}

Notice the type=text filter.

In this case you dont need to explicitly exclude type=button since you only care about matching type=text

Upvotes: 2

Related Questions