Why aren't my multiple CSS attribute selectors working?

Question

I have two forms, one that contains a form field for entering a username and a second form on another page where a user enters an email address:

<!-- user.html -->
<form action="/account/login/" method="post">
  <div class="form-group mt-3">
    <input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" placeholder="Username" class="form-control form-control-md" required id="id_username">
  </div>
  <p class="mt-4"><input type="submit" class="btn btn-block btn-primary" value="Login"></p>
</form>


<!-- email.html -->
<form action="." method="post">
  <div class="form-group">
    <input type="email" name="email" autocomplete="email" maxlength="254" placeholder="Email" class="form-control form-control-md" required id="id_email">
  </div>
  <input type="submit" value="Send Email" class="btn btn-primary btn-block">
</form>

I'm trying to style both input controls using multiple attribute selectors like this but it's not working. The styles aren't being applied.

// styles.scss
form input[type=text][type=email] {
    background-color: #f0f0f0;
}

But if I separate the types into two separate rules like this, the styles do get applied properly.

form input[type=text] {
    background-color: #f0f0f0;
}

form input[type=email] {
    background-color: #f0f0f0;
}

The CSS documentation says this should work. What am I doing wrong?

score 0 · Answer 1 · edited Sep 21 '20 at 22:35

0

Add a comma after input with the type of text.

edited Sep 21 '20 at 22:35

Félix Paradis

5,165
6
40
49

answered Sep 21 '20 at 22:29

newbiefatcoder

45
6

score 0 · Accepted Answer · answered Sep 21 '20 at 22:39

As per the documentation this matches when type=email AND type=text which can't be true.

Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

You would need to include both versions;

form input[type=text],
form input[type=email] {
    background-color: #f0f0f0;
}

Why aren't my multiple CSS attribute selectors working?

2 Answers2