50

select要素があり、選択フィールドのタイトルとして最初のものを使用していoptionます。select最初のオプションが選択されたときに、フィールド内のテキストをグレーアウトする方法があるかどうか疑問に思っています。これは JS でのみ行うことができますか、それとも CSS ソリューションはありますか?

最初のスタイルを変更しようとしましたoptionが、ドロップダウン メニューをアクティブにしたときにのみテキストの色が変わります。

<select>
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
4

5 に答える 5

42

2017年9月編集

以下の Tessa の回答をご覧ください。これは CSS のみであり、今でははるかに優れています。この回答は現在ほぼ 5 年前のものであるため、状況は少し変化しています。参考までに元の回答を残しておきます。

元の答え

私はあなたが必要とするものに近づいています：

SELECT 全体を灰色にして (閉じると灰色になるように)、すべての OPTION を「非灰色」にして (黒く)、最初の子を灰色にする必要があります。このようなもの：

CSS

select
{
    color: #ccc;
}
option
{
    color: #000;
}
option:first-child
{
    color: #ccc;
}

編集 編集されたコードは次のとおりです。

HTML

<select onchange="changeMe(this)">
  <option selected disabled>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

Javascript

<script type="text/javascript">
    function changeMe(sel)
    {
      sel.style.color = "#000";              
    }
</script>

jsFiddle を更新しました。ここで確認できます: http://jsfiddle.net/s5Xy2/5/ </p>

「disabled」属性を使用する必要があると思われるため、HTML 部分も変更したことに注意してください (そのため、「selected」属性も追加する必要があります)。

それでも純粋な CSS コードが必要な場合は、ここにあります: http://jsfiddle.net/s5Xy2/4/

于 2012-12-04T17:10:08.060 に答える
0

あなたは私のコードにあなたのコードを編集することができます：

<select id="drop">
  <option>Please select your favourite fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
<style type="text/css">
#drop :first-child
{
color:gray;
}
</style>

このコードは、最初のアイテムの色を灰色に設定します。

お役に立てば幸いです...

于 2012-12-04T00:51:51.643 に答える