Good afternoon friends!
There is a select list box. One option is disabled (since the combo box does not have a placeholder ) and hidden (so that it is not visible in the list). I want to implement such a thing: as long as the user does not select anything, this remains as if a " placeholder " with a gray color. When option is selected - the color inside the field is black.
He was trying to and so and so, I had to suffer a little more with the custom arrow.
Friends, tell me how to implement?

 .form_select { position: relative; } select { margin-bottom: 30px; color: #888; position: relative; } select:hover { cursor: pointer; } /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ @media screen and (-webkit-min-device-pixel-ratio:0) { .main_sect_right_side select { padding-right: 18px; } } .form_select::after { content:'>'; font: 21px "Consolas", monospace; color:#aaa; background-color: #dedede; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); right: 5px; top: 5px; position: absolute; pointer-events: none; width: 30px; height: 30px; } 
 <div class="form_select"> <select> <option disabled selected hidden>Choose you hypervisor...</option> <option>1</option> <option>2</option> </select> </div>

    1 answer 1

    In my opinion, the discoloration is already working for you. Just do not forget to adjust the color option so that they remain saturated:

     option { color: #000; }

    Unfortunately, it’s impossible to return the color via CSS, but you can do something like this:

     <select onchange="this.setAttribute('data-selected', true)"> <option disabled selected hidden>Choose you hypervisor...</option> <option>1</option> <option>2</option> </select>

    And in styles:

     [data-selected] { color: #000; }
    • cool! thank! - Igor Voinov