使用 CSS 在选择类型输入中专门设置样式滚动条

Question

拥有一个使用 JQuery 和 CSS 设计样式的站点。使用表单收集搜索输入，但选择框和滚动条有问题。

我主要为 Chrome 和 IE 开发这个。现在我很关心 Chrome，但跨平台的解决方案会很好。

使用 webkit-scrollbar 设置其他滚动条的样式效果很好：

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

使用以下样式设置选择输入框也可以正常工作：

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  /*-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);*/
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;

}

我似乎无法整合的是当您单击选择输入时出现的特定滚动条的样式（当存在足够多的项目以导致滚动条时）。

它显然没有元素，我不知道它是否真的可以设计。JQuery 可能是一个选项，但我不想在插件后用插件重载页面。

页面上的所有其他内容都是样式化的，Chrome 和 IE 中的默认滚动条在输入上看起来确实不合适。

我意识到创建我自己的下拉框并填充一个隐藏的输入字段可能是一种方法，但考虑到 HTML5 和 CSS3 应该是多么灵活，这似乎相当不优雅，并且需要更多的工作和 JQuery 添加到页面中。

任何帮助或见解表示赞赏。

Answer 1

我很确定您无法设置选择元素的样式，或者至少不能很好地设置样式。如果能有选择就好了，但我想改变的价值观太多了，所以创建自己的价值观更容易。基本上只需制作一个带有可点击元素的 div 即可更改隐藏输入的值，并且可以使用显示所选值的单独元素来显示和隐藏。

就我个人而言，我认为这是最好的方法，因为您可以完全控制它，从而可以按照您想要的方式设计样式，但是，您也可以使用 javascript UI 插件（例如 jQuery UI）来更改输入元素的样式。