css - 使用 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

我很确定你不能设置 select 元素的样式，或者至少不是很好。有这个选项会很好，但是我想要改变的值太多了，所以创建我自己的值更容易。基本上只是制作一个带有可点击元素的 div，这些元素会更改隐藏输入的值，并且可以使用显示所选值的单独元素来显示和隐藏。

我个人认为这是最好的方法，因为你可以完全控制它，让它按照你想要的方式设置样式，但是，你也可以使用 javascript UI 插件，比如 jQuery UI 来改变输入元素的样式。