So wählen und ändern Sie den Wert in der Dropdown-Liste <select> über CSS

Question

Vielen Dank im Voraus für die Hilfe.

Angesichts der HTML unten, wie könnte man CSS verwenden, um den "Bitte wählen ..." Wert im Dropdown und ersetzen es mit "Wählen Sie einen Staat"?

<span class="label"><label for="state">STATE</label></span> 

<select id="state" name="state" class="inputbox" size="1"> 
    <option value="">Please Select...</option> 
    <option value="AL" class="USA">AL</option> 
    <!--truncated for brevity --> 
    <option value="WI" class="USA">WI</option> 
</select> 

Danke nochmal!

Answer 1

Dies kann nicht mit CSS durchgeführt werden. (CSS kann nicht Ihr Dokument für Content-Strings abfragen und ersetzen)

Verwenden JavaScript oder eine beliebte JS Bibliothek entwickelt für DOM-Manipulation wie jQuery

Beispiel mit jquery

$("#state option").text(function(idx, txt) { 
 
    if(txt==="Please Select...") return "Choose a State"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="label"><label for="state">STATE</label></span> 
 
<select id="state" name="state" class="inputbox" size="1"> 
 
    <option value="">Please Select...</option> 
 
    <option value="AL" class="USA">AL</option> 
 

 
    (truncated for brevity) 
 

 
    <option value="WI" class="USA">WI</option> 
 
</select>