Question

当加载页面时，它是选项列表中的默认颜色（在chrome中为＃c8c8c8，蓝色为faerfoks）。如何改变/透明？我尝试了伪类和js的不同组合 - 都是徒劳的。当您单击某个选项时，它可以正常工作。 For examle：

<select multiple>
   <option selected>1111111</option>
   <option selected>222222222</option>
   <option selected>33333333</option>
   <option selected>44444444</option>
</select>

我无法访问此列表正在形成的服务器部分。

Answer 1

您正在加载包含四个所选元素的页面，只需删除您不希望页面加载灰色的selected属性。

＆＃13;

select option {
  background-color: red;
}

select option[selected] {
  background-color: blue;
}

＆＃13;

<select multiple>
    <option>1111111</option>
    <option>222222222</option>
    <option selected>33333333</option>
    <option>44444444</option>
</select>

＆＃13;

Answer 2

只需移除您不希望页面加载灰色的selected属性。

Answer 3

选项以灰色突出显示而不是蓝色的原因是它们不在焦点上。当您单击它所关注的元素时，选项将根据需要更改为蓝色。（如果您再点击选择，它们将变回灰色）。使用autofocus属性自动关注此元素。

<select multiple autofocus="autofocus">
   <option selected>1111111</option>
   <option selected>222222222</option>
   <option selected>33333333</option>
   <option selected>44444444</option>
</select>

如果您想更改默认颜色方案，请使用css focus选择器

select:focus {/*Add styles for in focus*/}
select:not(:focus) {/*Add styles for not in focus*/}

您正在选择四个选项，所以如果您只想选择一个选项，请参阅@KyleDumovic的回答

祝你好运！

如何更改选择倍数下拉列表的默认背景

3 个答案: