CODEWITHSUNDEEP
htmlcssselectstylingmaterialize
William Carron
William Carron

Reputation: 410

Styling <select> tag when option has been selected [CSS3]

I have a select tag, like so:

<select>
  <option>Blah</option>
  <option>Blah</option>
  <option>Blah</option>
  <option>Blah</option>
</select>

I am using MaterializeCSS as my CSS framework, and have successfully overridden and applied selective styling to other input elements like textareas, etc. (http://materializecss.com/forms.html)

I just want to adjust the border-bottom, and the color of the tag after an option has been selected.

I've tried the following pseudo-classes: [:active, :focus, :checked, :enabled, :valid, ::before, and ::after] trying to find the proper state for me to apply the CSS rules. As always, I've dug through the materialize source code and trawled MDN for the proper answer, but no such luck so far.

I'd love someone to point me to the proper documentation, or throw me a bone on this one. Thanks for your help.

Upvotes: 0

Views: 479

Answers (1)

joshhunt
joshhunt

Reputation: 5345

Unfortunately this isn't possible using CSS. Some possible workarounds:

  1. Use javascript
  2. Use the html5 required attribute along with CSS's :required pseudo class. Something like:
<select required>
    <option value="">None</option>
    <option>Blah</option>
    <option>Blah</option>
    <option>Blah</option>
    <option>Blah</option>
</select>

select {
    border: 5px solid #ccc;
}

select:valid {
    border-color: green;
}

Not a perfect solution but it might help with what you are doing.

JSFiddle

Browser support

Upvotes: 2

Related Questions