Question

我正在尝试使用原始HTML和CSS构建自定义选择选项列表。

从基本的Google搜索中，我了解到这些选项元素是由操作系统而不是HTML呈现的，因此无法自定义样式。

但是我找不到关于它如何影响其自定义样式功能的很好的解释。

这也是我正在从事的一个有角度的CLI项目。我了解有解决此缺点的方法，其中将选择列表替换为ul li列表。此外，还有一些角度插件可以用于自定义下拉菜单。

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  outline: none;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22px;
  background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png) 96% / 20% no-repeat;
}

select:hover {
  border: 1px solid #7d7873;
  background: url(https://i.stack.imgur.com/CE5lz.png) 96% / 20% no-repeat;
}

select:active {
  border: 1px solid #0496bb;
  background: url(https://i.stack.imgur.com/CE5lz.png) 96% / 20% no-repeat;
}

/* cannot custom style this */
option:hover {
  background: #0496bb;
}

option {
  background: yellow;
}

select::-ms-expand {
  display: none;
  /* remove default arrow on ie10 and ie11 */
}

<h2>
  Custom option hover in select list
</h2>
<select #selectTest>
  <option>Gryffindor</option>
  <option selected>Ravenclaw</option>
  <option>Hufflepuff</option>
  <option>Slytherin</option>
</select>

Answer 1

对于像我这样挣扎的任何人，我使用了以下npm软件包Angular Custom Dropdown。

这里有一些npm软件包。我发现其他程序包的顶部样式很多，这不是我想要的。因此，我最终使用了上面的那个。

我试图在此处添加代码段，但无法添加有角度的5 CDN链接。因此，我将提供一些我实现的自定义下拉菜单的屏幕截图：

DropDown Expanded option hover

为什么我们不能使用CSS自定义HTML中选择选项的突出显示颜色的样式？

1 个答案: