Kann ein ausgewähltes <option> DropDown noch gestylt werden? (Stand 2017)

Question

Einfache Frage mit scheinbar keine echte Lösung für jeden Browser außer Mozilla Firefox.

Können wir, ab 2017, das Dropdown-Menü und <option> Elemente eines <select> Felds stylen?

Vorzugsweise nur CSS, aber auch JavaScript-Lösungen.

select { 
 
    outline: 0; 
 
} 
 

 
option { 
 
    outline: 0; 
 
    padding: 4px 8px; 
 
} 
 

 
option.yes { 
 
    border: 1px solid green; 
 
} 
 

 
option.yes_but_no { 
 
    border: 1px solid orange; 
 
} 
 

 
option.no { 
 
    border: 1px solid red; 
 
}

<select> 
 
    <option>Choose an answer</option> 
 
    <option class="yes">Yes, we finally can!</option> 
 
    <option class="yes_but_no">Yes, but only in Firefox</option> 
 
    <option class="no">No, we still can't...</option> 
 
</select>

Answer 1

Sie können dies mit jquery select2 tun. und es gibt viele Features in select2 statt einfacher wählen

$("select").select2({ 
 
    templateResult: function (data, container) { 
 
    if (data.element) { 
 
     $(container).addClass($(data.element).attr("class")); 
 
    } 
 
    return data.text; 
 
    } 
 
});

.yellow { background-color: yellow; } 
 
.blue { background-color: blue } 
 
.green { background-color: green; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script> 
 

 
<select class="select2"> 
 
    <option value="AL" class="yellow">Alabama</option> 
 
    <option value="AK" class="blue">Alaska</option> 
 
    <option value="AZ" class="green">Arizona</option> 
 
</select>

Answer 2

Sie div machen könnte und machen es wie

#option1 { color: blue; background-color: red; } 

    hover:#option1 { background-color: white; } 

Ich bin nicht wirklich sicher, ob der Hover funktionieren würde, aber dann würden Sie gerade tun

<option class="no" div="option1";>No, we still can't...</option>