ドロップダウンリストの値の選択と変更方法<select>（CSS経由）

Question

ご協力ありがとうございます。

下のHTMLでは、CSSを使用してドロップダウンリストの[選択してください...]の値を見つけて、の代わりにを「状態を選択」に置き換えますか？

<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> 

もう一度おねがいします！

Answer 1

これはCSSを使用して行うことはできません。

使用JavaScriptをまたは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>

を用いて、実施例 jQueryの

のようなDOM操作用に設計された人気のJSライブラリ（CSSは、コンテンツ文字列の文書を照会し、置き換えることはできません）