8

複数選択ドロップダウンボックスで選択したアイテムに黄色を付けたいです。デフォルトでは、選択後、背景が灰色になりHTMLますCSS。

この質問は複数選択に関するものですが、単一選択については参照してください (関連していますが、どちらも重複していません): How to apply background-color to a selected option?

4

6 に答える 6

7

以下の CSS を使用するだけで簡単に実行できます。

select option:checked{
  background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%);
}
于 2016-12-14T13:24:32.180 に答える
2 
<style>
     .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: inherit;
        color: lightgray;
    }
</style>

ブロック内に独自のスタイルを追加します。

于 2016-11-07T09:58:14.220 に答える
1

JS を使用して DOM を選択できます。

$('select').change(function() {
    $('option').css('background', 'none');
    $('option:selected').css('backgroundColor', 'red');
}).change()

<select>
    <option>1111111</option>
    <option>222222222</option>
    <option>33333333</option>
    <option>44444444</option>
</select>

デモ: http://jsfiddle.net/TxbVt/1/

于 2013-07-07T05:50:53.580 に答える
0

以下は動作するはずです (スタイル オプション タグを許可するブラウザの場合)が、ほとんどの場合、デフォルトの選択スタイルが上書きされます。ただし、これを無効にする方法を見つけることができる場合があります。

CSS

select option.selected {
  font-weight: bold;
  color: red;
}

JavaScript

function highlight_options(field){
  var i,c;
  for(i in field.options){
    (c=field.options[i]).className=c.selected?'selected':'';
  }
}

マークアップ

<select onchange="highlight_options(this)" multiple="multiple">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
于 2012-11-22T15:39:00.930 に答える
-3

できません。この<option>要素は CSS スタイルを受け入れません。

JavaScript ベースの代替手段を使用できます。利用可能な多くの<select>置換スクリプトがあります。

于 2012-11-22T15:26:04.633 に答える