Question

有没有办法只使用CSS自定义具有多个打开选项的单个选择框？我到处寻找，我似乎无法找到任何直接的快乐:(我的代码将基于搜索添加选项框的选项但为了简单起见，我刚刚插入该示例以显示它将是什么样子。想知道你是否可以改变背景颜色，悬停时的颜色，动画等。

<div id="album">
<select id="albumPicker" size="5">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>

感谢您的时间！

Answer 1

如果您想单独设置每个选项的样式，请为每个选项指定一个id，并在CSS代码样式中为选项元素提供与任何其他元素一样的选项元素。

<style>
#option1{
    color:blue;
    background:red;
}
#option1:hover{
    color:red;
    background:blue;
}
</style>
<div id="album">
<select id="albumPicker" size="5">
  <option id="option1">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>

Answer 2

我不是100％，这可以使用严格的CSS来完成。我过去曾使用Selectric之类的jQuery插件来完成此任务。希望它有所帮助！

Answer 3

如果我正确理解您的问题，您可以使用:nth-child伪类完成此操作。

例如：

#albumPicker option:nth-child(2n+2){
  background-color: red;
}

这将从第二个option开始选择每个其他option字段。 Here's a fiddle来演示。

如何使用CSS自定义多选框

3 个答案: