web-dev-qa-db-ja.com

選択ボックスオプションの背景色を変更する

私はselectボックスを持っていて、selectボックスがクリックされてすべてのオプションを表示しているときにオプションの背景色を変更しようとしています。

フィドルを参照

HTML：

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS：

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
htmlcsshtml-selectbackground-color
100
ngplayground

optionタグではなくselectタグにbackground-colorを付ける必要があります...

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

それぞれのoptionタグをスタイルしたい場合は、css attributeセレクタを使用します。

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

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

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}
<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>
134
udidu

考慮したかどうかはわかりませんが、アプリケーションがさまざまな項目のグループに色を付けることに基づいている場合は、さらに参照するためにクラスと一緒に<optgroup>タグを使用する必要があります。例えば：

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

そしてあなたのドキュメントの頭の中に次のようにCSSを書きます。

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>
16
rfoo

はい、あなたはこれを使って反対の方法でこれを設定することができます、

option:not(:checked) { }

これをチェックして demo jsFiddle

HTML

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

CSS

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#FFF;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) { 
    background-color: white; 
    color:#000;
}
15
Jay Patel

enter image description here

いくつかの答えに似ていますが、実際には指定されていませんが、実際のオプションタグにクラスを追加し、cssクラスを使用することです...これは現在、IE（上記のssを参照） 。

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS：

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}
5
dah97765

Bgの色を変えるだけ

select { background: #6ac17a; color:#fff; }

1
Thomas Mathew
$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

あなたのHTML部分に$htmlIngressCssを追加してください:)

1
Chintan

あなたが本当に内にスタイルを設定したい場合は、 http://getbootstrap.com/2.3.2/components.html#dropdowns または https://silviomoreto.github.io/bootstrap-select/examples/ 。これは、IE などのブラウザでは、要素内のオプションのスタイル設定が許可されていないためです 。 Chrome/OSXにもこの問題があります - あなたはオプションをスタイルすることはできません。

しかし、そのアプローチには警告が付けられています。ネイティブの要素は使用されていないため、これらの種類のメニューはモバイルプラットフォームではまったく異なる動作をします。彼らは同様にデスクトップ上で迷惑な癖を持つことができます。私のアドバイスは、1）あなた自身のものを書かないこと、そして2）本当によくテストされたライブラリを見つけることです。

1
Charlie Dalsass

私のセレクトは私が追加するまで背景を着色しません！スタイルにとって重要です。

    input, select, select option{background-color:#FFE !important}
0
Bob Brunius

もう1つの選択肢は、Javascriptを使用することです。

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

（CSS属性セレクタほどきれいではありませんが、より強力です）

0
Travis

ここでそれは私が主題について学んだことになります！

CSS 2仕様では、フォーム要素をユーザーにどのように提示するかという問題については取り上げられていませんでした。

ここで読む：スマッシングマガジン

やがて、このトピックに関するw3cまたはその他の技術記事は決して見つかりません。特定の選択ボックス内のスタイル要素のスタイルは完全にはサポートされていませんが、ある程度の努力を払ってドライブすることができます。

HTMLフォーム要素のスタイル

カスタムウィジェットの作成

そのようなハックで時間を無駄にしないでください、そして、そのようなリンクを読んで、プロが仕事を成し遂げる方法を学んでください！

0
obinoob