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

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        2年前关闭。
                                                                                            
                
        
我正在尝试使用香草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/[e-mail]) 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>

最佳答案

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

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

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

正常下拉



下拉悬停



下拉活动



DropDown展开



DropDown扩展选项悬停