如何改变在多选下拉框中选定项的背景颜色？(how to change background colo

我想给黄颜色以多选下拉框中选定的项目。 默认情况下，它有选择之后灰色的背景，我想这样做的HTML, CSS 。

可以在此任意一个帮助吗？

Answer 1:

我们可以简单地做下面的CSS的帮助。

select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }

Answer 2:

<style>
     .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: inherit;
        color: lightgray;
    }
</style>

添加您自己的风格的块中。

Answer 3:

我们可以用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/

Answer 4:

以下应工作（用于浏览器，让造型选项标签），但是默认选择的造型将在大多数情况下覆盖。 您可能能够找到一种方法，但是禁用此：

• http://jsfiddle.net/DEDX7/
• http://jsfiddle.net/DEDX7/1/

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>

Answer 5:

纯CSS将有助于在这里：

option:checked

Answer 6:

你不能。 在<option>元素不接受CSS样式。

您可以使用一个基于JavaScript的替代品。 有很多<select>替换脚本中使用。

文章来源: how to change background color of selected items in multiselect dropdown box?