0

I'm trying to have a select dropdown where the text is grey before you select an option and then blue after you select an option. So far I've gotten to the point where it turn blue when selected but it turns back to grey after you click somewhere else. Here's my code:

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
.select {
  padding: 10px 15px;
  border: #383839 2px solid;
  color: #8c8c8c;
  font-weight: 700;
  /*18px*/
  font-size: 1.125rem;
  border-radius: 4px;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
.select:focus {
  box-shadow: none;
  border-color: #383839;
  color: #3a577d;
}

.form-control option:checked {
  color: #3a577d;
}

form input[type=text] {
  color: #3a577d;
}
<select class="form-control">
        <option value="" disabled selected>Exp. Month</option>
        <option>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
    </select>

The thing is that when I inspect the option that's checked, the option:checked CSS IS being applied. I've also tried putting the styles inline and even that doesn't work, the color stays the same.

j08691
  • 204,283
  • 31
  • 260
  • 272
Linx
  • 753
  • 3
  • 15
  • 34
  • What OS and browser(s) are you trying this in? As in [this SO answer](http://stackoverflow.com/a/17203491/17300) WebKit browsers (Chrome, Safari) don't support styling of ` – Stephen P Mar 20 '17 at 20:07
  • I tried this in Chrome and Explorer. My conclusion is that this is not possible; the default color will always override any changes you make. Even if I add an inline style and make the text blue it still appears as grey. – Linx Mar 23 '17 at 20:44

0 Answers0