在选项标签上的多选菜单中更改活动颜色答案

【问题标题】：Change active color in multiple select menu on the option tag在选项标签上的多选菜单中更改活动颜色
【发布时间】：2018-08-08 17:26:38
【问题描述】：

选择选项值是蓝色的，但是当您单击页面上的其他任何内容时，它会变成浅灰色。是否可以更改这两种颜色中的任何一种？最重要的是出于可访问性原因的淡灰色。

我在 CSS 中尝试了很多东西，但都没有成功。

<label class="multiDropdown-label">Multiple Select
  <select multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</label>

【问题讨论】：

How to change select box option background color?的可能重复
你试过了吗？：stackoverflow.com/a/36899803/1516112 它有效，但我认为我只是一个 hack 而不是最终解决方案。

标签： html css zurb-foundation

【解决方案1】：

@nikoskip 的评论回答了我的问题。

select[multiple]:focus option:checked { background: red linear-gradient(0deg, red 0%, red 100%); }

【讨论】：

不，它没有。我正在为您制定解决方案。但是，问题是当您单击一个项目时，突出显示的颜色是白色，这是您的问题之一。

【解决方案2】：

这项工作正在进行中...同时发布当前结果

select[multiple]:focus option:checked {
  background: white linear-gradient(0deg, white 0%, white 100%);
  outline:none!important;
}

select[multiple]:focus option {
  background: white linear-gradient(0deg, white 0%, white 100%);
}

select[multiple] option{
   background: white linear-gradient(0deg, white 0%, white 100%);
}

/* turns off highlighting of the box completely */
select:active, select:hover, select:focus-within, select:focus {
  outline: none;
}
select {
       width: 100%;
       padding: 0;
       border: none;
       font-size: 16px;
       color: #868686;
       overflow:hidden; /* removes the scrollbar */
}
select option {
    display: inline;
    float: left;
    margin-right: 128px;
    overflow:none;

}

[selected] { /*works in some browsers, not chrome. Working on a fix */
color:#f00; 
font-weight:bold;
}

<select multiple>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

【讨论】：