Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Multiple Attribute Selectors

I would like to style form inputs of type "email" and "password", but not anything else. I was imagining something like the following:

input[type="email"][type="password"] {
    ....
}

However, the way attribute selectors work, it appears to interpret this as "input where the type is simultaneously both 'email' and 'password'". What I'm going for is "input where the type is either exactly 'email' or 'password'". Of course, nothing is both of type email and of type password at the same time.

Is it possible to write a CSS rule that or's across multiple different attribute selectors?

For reference, the HTML would look something like:

<form id="login" onsubmit="return fadeaway()">
    <fieldset>
    <input type="email" placeholder="username"/> <br />
    <input type="password" placeholder="password"/> <br />
    </fieldset>
</form>
like image 951
Chuck Avatar asked Mar 02 '12 16:03

Chuck


People also ask

Can I use multiple selectors in CSS?

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

How do I group multiple selectors in CSS?

The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.

What are attribute selectors in CSS?

CSS [attribute|="value"] Selector The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).


2 Answers

Just do this:

input[type="email"], input[type="password"]
like image 140
maxedison Avatar answered Sep 29 '22 09:09

maxedison


use a comma :

input[type="email"],input[type="password"] {
    ....
}

w3 docs on group selectors here

like image 36
Manse Avatar answered Sep 29 '22 11:09

Manse