私はテキスト入力にプレースホルダーを使っていて、それはうまくいっています。しかし、セレクトボックスにもプレースホルダーを使いたいと思っています。もちろん、このコードを使うこともできます。
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
しかし、 'Select your option'がライトグレーではなく黒になってしまいます。jQueryでも良いのですが、CSSでの解決方法を教えてください。
この方法では、ドロップダウン(矢印をクリックした後)で選択肢がグレーになるだけです。
option:first {
color: #999;
}
質問は、どうやってセレクトボックスにプレースホルダーを作るのかということです。しかし、それはすでに答えられています、ありがとう。
また、これを使用すると、選択された値が常に灰色になってしまいます(本物のオプションを選択した後でも)。
select {
color: #999;
}
この質問に偶然出会ったのですが、FirefoxとChromeでは(少なくとも)以下のように動作します。
。<スタイル select:invalid { color: gray; }。
こんな感じです。
HTMLです。
<select id="choice">
<option value="0" selected="selected">Choose...</option>
<option value="1">Something</option>
<option value="2">Something else</option>
<option value="3">Another choice</option>
</select>
CSSです。
#choice option { color: black; }
.empty { color: gray; }
JavaScriptです。
$("#choice").change(function () {
if($(this).val() == "0") $(this).addClass("empty");
else $(this).removeClass("empty")
});
$("#choice").change();
動作例: