2015-09-21 6 views
5

Ich setze ein Hintergrundbild (Pfeil nach unten) auf ein Auswahlfeld, nachdem ich das webkit-appearance Attribut auf none gesetzt habe. Wenn die Optionsliste geöffnet ist, möchte ich ein anderes Hintergrundbild anzeigen (Pfeil nach oben). Gibt es eine Pseudoklasse oder etwas dafür? Ich konnte nichts während meiner Forschung finden ...Gibt es eine Möglichkeit, eine offene Auswahlbox in CSS auszuwählen?

+0

Hallo, zeigen Sie uns bitte einen der Code, den Sie versucht haben, dann können wir Ihnen in die richtige Richtung starten –

Antwort

8

Es ist nicht möglich zu erkennen, ob ein HTML select Element mit CSS oder sogar Javascript geöffnet wird.

Wenn Sie das Pfeilsymbol eines benutzerdefinierten Dropdown-Menüs anpassen möchten, verwenden Sie am besten eine benutzerdefinierte Dropdown-Komponente, die einem ausgeblendeten Element select zugeordnet ist.

+3

oh was für eine Schande, eine solche Funktion wäre nützlich zu helfen. Aber vielen Dank! – user2718671

12

können Sie die :focus Pseudoklasse verwenden.

Dies zeigt jedoch den Zustand "offen" an, auch wenn die <select> über die Registerkarte ausgewählt wurde oder ein Element gerade ausgewählt wurde. Um dies zu umgehen, verwenden Sie vielleicht etwas wie select:hover:focus, aber das ist ziemlich hässlich und ist keine feste Lösung.

select:focus 
 
{ 
 
    background-color: blue; 
 
    color: white; 
 
}
<select> 
 
    <option>Click me</option> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select>

+1

select: focus: active erledigt den Job zumindest in Chrome. – RSeidelsohn

Verwandte Themen