Question

我想在多选下拉框中为所选项目指定黄色。默认情况下，选择后它有灰色背景，我想在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

以下内容应该（适用于允许样式选项标记的浏览器），但在大多数情况下，默认选择样式将会覆盖。您可以找到一种方法来禁用它：

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会对此有所帮助：

(Array.isArray(a) || []).length

Answer 6

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

您可以使用基于JavaScript的替代方案。有许多<select>替换脚本可供使用。

如何在多选下拉框中更改所选项目的背景颜色？

6 个答案: