Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to select elements using CSS selector who's attribute can have multiple values

How to select elements using CSS selector who's attribute can have multiple values

Problem

sample condition is

(type=text || type=password || type=search || type = tel) && readonly!=true && disabled!=true && focused

for example,

1.
2.
3.
4.
5.

only 1,2,3 should selected, 4 & 5 shouldn't be selected. I already googled, but no use. can anybody help me?

(without using any js libs like jquery)

Problem courtesy of: Arunprasad Rajkumar

Solution

Your answer is a combination of using the attribute Selector and the not selector and the :focus selector.

Here's a JsFiddle and the CSS below: http://jsfiddle.net/rgthree/bdb63/

input[type="text"]:not([readonly]):not([disabled]):focus,
input[type="password"]:not([readonly]):not([disabled]):focus,
input[type="search"]:not([readonly]):not([disabled]):focus,
input[type="tel"]:not([readonly]):not([disabled]):focus { /* ... */ }

Though, depending on your form, you may find it easier to style all inputs not a certain type in a single rule. Something like:

input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not([disabled]):focus { /* ... */ }
Solution courtesy of: rgthree

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to select elements using CSS selector who's attribute can have multiple values

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×