Style element based on selected

by

Impossible? Hold my beer.

Make the select element aware of the current option. CSS can handle the rest. For this, all we need is a value assignment in the onchange event. With a little more effort you can also initialize the <select> tag by its original value; not included below but it’s super easy, just give it a “data-chosen” property when composing the markup.

    <select onchange=" this.dataset.chosen = this.value; ">
        ...
        ...
    </select>

And now you can easily target & style it:

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

See on CodePen.

Side note: “chosen” is no magic word, just a descriptive name – it could be “SantaClaus”. It would also look better that way.

More Related Contents:

  1. How to set opacity in parent div and not affect in child div? [duplicate]
  2. Select nth-child across multiple parents
  3. The page moves to the left
  4. CSS display: inline vs inline-block [duplicate]
  5. How to style the with only CSS?
  6. Detect if an input has text in it using CSS — on a page I am visiting and do not control?
  7. CSS @media print issues with background-color;
  8. What, exactly, is needed for “margin: 0 auto;” to work?
  9. Setting width/height as percentage minus pixels
  10. Change opacity on all elements except hovered one
  11. Can I change the height of an image in CSS :before/:after pseudo-elements?
  12. What is the difference between :first-child and :first-of-type?
  13. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  14. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  15. CSS disable hover effect
  16. Are unused CSS images downloaded?
  17. Background-image in keyframe does not display in Firefox or Internet Explorer
  18. @import vs link
  19. Dynamic Sass Variables
  20. How can I ensure that text is inside rounded div?
  21. Symfony2 – Assetic – load images in CSS
  22. Are CSS selectors case-sensitive?
  23. Is there a way to apply styles to Safari only?
  24. Placeholder Mixin SCSS/CSS
  25. The difference between flex:1 and flex-grow:1
  26. How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?
  27. position:relative leaves an empty space
  28. What is the difference between pseudo-classes and pseudo-elements?
  29. How to fade the edge of a div with just CSS? [duplicate]
  30. How to properly introduce a light/dark mode in Bootstrap?

Leave a Comment