html - 如何自定义两个不同颜色的select标签？

Question

我的网页中有两个选择标签。但是我来定制它们两种不同的颜色。关于我该怎么做的任何建议？

下面是我的代码。

select {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 80%;
  overflow-y: auto;
  text-align: center;
  border: 1px;
  background-color: #4472C4;
}

select option {
  border: none;
  margin-top: -1px;
  /* Prevent double borders */
  padding: 12px;
  text-decoration: none;
  font-size: 1.5vw;
  color: black;
  display: block
}

select option :hover:not(.header) {
  background-color: aliceblue;
  color: white;
}

<td width=20% style="background-color: #4472C4">
  <label>
    <h2>Our Recommended Favorites</h2>
    <select size=9 id="myList" class="list-content" onchange="setPicture();">
    </select>
  </label>
</td>
<td width=40%>
  <label>
    <select size=3 id="myList-1" class="list-content"></select>
  </label>
</td>

Answer 1

您可以使用 id 的 # 的 css 选择器来设置它们的样式 你可以阅读更多关于它的信息。在 this site

在这种情况下，您可以使用以下代码为它们提供不同的颜色:

#myList {
    background-color: green;
}

#myList-1 {
    background-color: red;
}