1

次の回答が見つかりました選択ボックスオプションの背景色を変更するには? しかし、それは私にはうまくいきませんでした。

私のhtmlファイルには次のリストがあります

<select>
<option value="item 1" ></option>
<option value="item 2" ></option>
<option value="item 3"></option>
</select>

そして次のcss

select option[value="item 1"]{
    background: rgba(100,100,100,0.3);
}

しかし、私はまだ背景色のない空のリストを取得しています。私が取得しようとしているのは、色だけでテキストのないある種のドロップダウンです

このようなもの

ここに画像の説明を入力

ありがとう

4

2 に答える 2

2

nth-child()代わりに行く：

select option:nth-child(1) {
    background: rgba(100,100,100,0.3);
}

オプションの値を変更するたびに CSS を変更する必要もありません。

編集 - そうだと思います

select option:nth-child(1) {
    background: red;
}
select option:nth-child(2) {
    background: yellow;
}
select option:nth-child(3) {
    background: green;
}

<select>
<option value="item 1">&nbsp;&nbsp;</option>
<option value="item 2">&nbsp;&nbsp;</option>
<option value="item 3">&nbsp;&nbsp;</option>
</select>
于 2013-09-22T05:01:24.007 に答える
0

option要素が空であるため、空のリストが表示されます。空の領域の背景を見ることができるとは期待できません。optionただし、要素に改行なしのスペースなどを含めることができます。

<option value="item 1" >&nbsp;</option>

一部のブラウザーではまだ問題が発生する可能性があります (option要素のスタイルには多くの奇妙な点とブラウザーの違いがあり、現在選択されているオプションの背景とテキストの色は、CSS で設定できるのではなく、ブラウザーによって固定される傾向があります)。

ただし、おそらく完全に異なるアプローチが必要です。10年か20年の間に実装されるのを待って<input type=color>いる間、色の選択を別の方法で設定する必要があります. このようなコードを含む既存のライブラリは多数ありますが、アクセシビリティの問題が発生する傾向があります。おそらく最も簡単な方法は、1 つの列にラジオ ボタン、別の列にカラー サンプルと対応する色名を含むシンプルなテーブルを作成することです。ここでも、背景色を使用して色見本を表示するために使用する要素に、区切りなしスペースなどのコンテンツを設定することを忘れないでください。

于 2013-09-22T05:36:31.680 に答える