HTML Select 无论焦点如何，背景始终为蓝色

Question

我正在使用 HTML select 多个属性的示例：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple。代码如下：

<!DOCTYPE html>
<html>
<body>

<h1>The select multiple attribute</h1>

<p>The multiple attribute specifies that multiple options can be selected at once:</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.</p>

</body>
</html>

当我select沃尔沃选项时，它有一个蓝色背景：

当我单击屏幕上的其他位置（以移除焦点）时，沃尔沃的背景变为灰色:

我的问题：如何使 selection（在本例中为沃尔沃）的背景始终为蓝色，而不管焦点如何？

Answer 1

据我所知，color 和 background-color 不能用 :checked 伪元素改变，但可以在 [=15 的帮助下模仿=].

option:checked {
  background: linear-gradient(lightblue, lightblue);
}

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Answer 2

您最好使用线性渐变。

select option:checked{
  background: #1E90FF -webkit-linear-gradient(bottom, #1E90FF 0%, #1E90FF 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

HTML Select 无论焦点如何，背景始终为蓝色

HTML Select Always have Blue Background Regardless of Focus

html

css

focus