Change select box option background color

by

You need to put background-color on the option tag and not the select tag…

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

If you want to style each one of the option tags.. use the css attribute selector:

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}
<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

More Related Contents:

  1. How do I make a placeholder for a ‘select’ box?
  2. Is it possible to have two background colors for a single html element? [duplicate]
  3. How to remove the default arrow icon from a dropdown list (select element)?
  4. CSS ”background-color” attribute not working on checkbox inside
  5. Select dropdown with fixed width cutting off content in IE
  6. Color of stacked semi-transparent boxes depends on order?
  7. Remove Select arrow on IE
  8. How to make an element’s background-color a little darker using CSS
  9. Html Select box options on Hover?
  10. Changing highlight color
  11. Set width of dropdown element in HTML select dropdown options
  12. Image in SELECT element [duplicate]
  13. How can change width of dropdown list?
  14. Rendering a hierarchy of “OPTION”s in a “SELECT” tag
  15. How to get equal width of input and select fields
  16. IE8 issue with Twitter Bootstrap 3
  17. Align image in center and middle within div
  18. CSS absolute position won’t work with margin-left:auto margin-right: auto
  19. What are the priorities among CSS selectors
  20. CSS: How can I set image size relative to parent height?
  21. How to make images stay within the rows of a css grid container?
  22. CSS – Sticky footer [duplicate]
  23. How to Make A Chevron Arrow Using CSS?
  24. Two div blocks on same line
  25. Change the column order in a css grid
  26. :before && :after pseudo elements not showing Firefox
  27. @font-face not working with specific version of Internet Explorer 11
  28. Media queries not working inside an iframe
  29. bootstrap 4: center inline form inside a jumbotron
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment