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>
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
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.
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 (-).
Just do this:
input[type="email"], input[type="password"]
use a comma :
input[type="email"],input[type="password"] {
....
}
w3 docs on group selectors here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With