Ändern Sie die Hintergrundfarbe des Dropdown-Menüs, wenn es aktiviert ist und wenn es ausgewählt ist

In meinem Formular habe ich mehrere Felder, zwei Eingabefelder und ein Dropdown-Menü. Wenn ich die Tabulatortaste drücke, gehe ich zum nächsten Feld, bis ich das Dropdown-Menü erreiche. Wenn mein Registerindex das Drop-down-Menü erreicht, möchte ich, dass es gelb ist, aber sobald ich auf das Drop-down-Menü klicke, sollte es ein weißer Hintergrund werden. Wie kann ich das machen?Ändern Sie die Hintergrundfarbe des Dropdown-Menüs, wenn es aktiviert ist und wenn es ausgewählt ist

select:focus{ 
 
    background-color: yellow; 
 
    color: black; 
 
} 
 

 
select:hover{ 
 
    background-color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
First name: <input type="text" name="FirstName" value="Mickey"><br> 
 
Last name: <input type="text" name="LastName" value="Mouse"><br> 
 

 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
    
 
</body> 
 
</html>

Quelle

2017-04-20 taji01

könnten Sie machen es erforderlich, und verwenden Sie einen ': valid' pseudoselector. – TricksfortheWeb

Wie [diese] (https://jsfiddle.net/yak613/4ta4rL8w/)? – TricksfortheWeb

Schließen, sieht aus wie Tabbed zum Drop-Down macht es gelb, das ist richtig. Aber wenn ich auf das Drop-down-Menü klicke, möchte ich, dass es wieder zu weißem Hintergrund wird. @TricksfortheWeb – taji01

Sie werden etwas Licht JavaScript brauchen dies zu ziehen aus, aber das sollte Ihnen den Einstieg:

CSS

.form-row { 
     padding: 8px; 
    } 

    /* when the select is focused, change the bg color */ 
    select:focus { 
     background: yellow 
    }

Demo-Markup:

<div class="form-row"> 
     <label for="text"> 
     Write Something: 
     </label> 
     <input type="text" id="text"> 
    </div> 

    <div class="form-row"> 
     <label for="select"> 
     Choose Something: 
     </label> 

     <select id="select"> 
     <option> 
      opt 1 
     </option> 
     <option> 
      opt 2 
     </option> 
     <option> 
      opt 3 
     </option> 
     </select> 
    </div>

JavaScript

<script> 
     // since clicking a select also focuses it, we need to undo 
     // the focus style. here i'm adding an inline style to do this 
     // but you could add a class that overwrites the focus style instead 
     document.getElementById('select').addEventListener('click', function() { 
     this.style.background = '#fff' 
     }); 

     // we want to be able to get the yellow focus again 
     // if we leave the select box, but re-focus it again 
     // so remove the inline style on blur 
     document.getElementById('select').addEventListener('blur', function() { 
     this.removeAttribute('style'); 
     }); 
    </script>

Quelle

2017-04-20 23:54:27 scottohara

Ja, das ist, was ich suche. Danke Ihnen allen für Ihre Hilfe! – taji01

Ändern Sie die Hintergrundfarbe des Dropdown-Menüs, wenn es aktiviert ist und wenn es ausgewählt ist

Antwort

Verwandte Themen