8

我想为多选下拉框中的选定项目赋予黄色。默认情况下，它在选择后具有灰色背景，如何在HTML,中执行此操作CSS。

这个问题是关于多选的，但对于单选参考（相关但不重复）：如何将背景颜色应用于选定的选项？

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 回答
-2

纯 CSS 在这里会有所帮助：

option:checked
于 2016-07-21T03:41:59.287 回答
-3

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

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

于 2012-11-22T15:26:04.633 回答