Question

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

我在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>

Answer 1

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

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

Answer 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>

在选项标签的多个选择菜单中更改活动颜色

2 个答案: