2

I am wondering if it is possible to add style to an select option, that is shown as a drop-down, specially in the ::before part. If I use the select as a list (with size="5") works well. So, I think that with dropdown the ::before element does not work:

#list {
  width: 200px;
  height: 100px;
}

#dropdown {
  width: 200px;
}

.gradient {
  position: relative;
  overflow: hidden;                   
}

.gradient:before {
  content: "";
  position: absolute;
  width: 900px;
  height: 300px;
  top: -50%;
  left: -125%;
  background-image: linear-gradient(#5cb85c, transparent);
  transform: rotate(90deg);
}
<html>
  <body>
    <select id="dropdown">
      <option value="one" class="gradient">One</option>    
      <option value="two">Two</option>    
      <option value="three" class="gradient">Three</option>    
      <option value="four">Four</option>    
    </select>
    
    <br/><br/>
    
    <select id="list" size="5">
      <option value="one" class="gradient">One</option>    
      <option value="two">Two</option>    
      <option value="three" class="gradient">Three</option>    
      <option value="four">Four</option>    
    </select>    
  </body>
</html>

selects

Is it possible? If not I will use a flat background color

ChesuCR
  • 9,352
  • 5
  • 51
  • 114
  • Related if not dupe - https://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element – Paulie_D Jan 17 '18 at 13:17

1 Answers1

-1

This is only possible if you create your own drop-down menu from zero. A flat color is quite easy to implement, see https://gist.github.com/paulgriffin1989/8984254

Messias Tayllan
  • 186
  • 2
  • 10