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

【问题标题】：Styling scrollbar specifically inside a select type input with CSS使用 CSS 在选择类型输入中专门设置滚动条样式
【发布时间】：2012-06-07 02:14:37
【问题描述】：

拥有一个使用 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 添加到页面。

感谢任何帮助或见解。

【问题讨论】：

标签： css forms google-chrome webkit

【解决方案1】：

选择下拉菜单的滚动条可以这样设置样式：

select::-webkit-scrollbar

为了让css生效，还需要设置width和height属性。下面的代码显示了 normal 下拉列表、styled 但没有宽度和高度属性 和 styled 下拉列表 用宽度和高度属性来说明差异。

select {
  padding: 3px 12px;
  outline: none;
  width: 250px;
  margin-bottom: 20px;
}

select.widthHeight::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

select.style::-webkit-scrollbar-track {
  border: rgb(180, 180, 180);
  background-color: #ff6536;
}

select.style::-webkit-scrollbar-thumb {
  background-color: #3677ef;
  border: 1px solid rgb(193, 193, 193);
}

div {
  margin-bottom: 5px;
}

<div>Normal</div>
<select>
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

<div>Styled without width and height css</div>
<select class="style">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

<div>Styled</div>
<select class="style widthHeight">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
  <option>Value 6</option>
  <option>Value 7</option>
  <option>Value 8</option>
  <option>Value 9</option>
  <option>Value 10</option>
  <option>Value 11</option>
  <option>Value 12</option>
  <option>Value 13</option>
  <option>Value 14</option>
  <option>Value 15</option>
  <option>Value 16</option>
  <option>Value 17</option>
  <option>Value 18</option>
  <option>Value 19</option>
  <option>Value 20</option>
  <option>Value 21</option>
  <option>Value 22</option>
  <option>Value 23</option>
  <option>Value 24</option>
  <option>Value 25</option>
</select>

【讨论】：

【解决方案2】：

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

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

【讨论】：

选择元素可以设置样式。我粘贴的代码效果很好。缺少的是对单击时创建的下拉菜单进行样式设置的能力。它没有元素，也不是 DOM 的一部分。滚动条也不是 DOM 的一部分，但它们也可以使用 CSS 设置样式。令人沮丧的是，Chrome 没有在下拉框中设置 specific 滚动条的样式。所以我真正的问题是是否存在任何特定的 CSS 可以为 Chrome 设置样式？
没有办法设置选择框或箭头的下拉菜单样式，只有文本输入区域的外观。正如我所说，最好的方法是创建一个自定义脚本，用一个文本框和一个隐藏的 div 替换选择元素，其中包含替换选项的 div。
这真的取决于项目的规模是否值得这样做。通常，用户只会在几秒钟内看到下拉菜单。还有一个事实是，习惯于查看默认下拉菜单，而自定义下拉菜单可能会令人困惑。

【解决方案3】：

关于是否使用 JS 和替代 HTML 标记来实现所需美学的相关想法。为了美观而“破解”它会在移动浏览器上导致不需要的结果吗？在 iPad 上，选择元素的默认功能是调出选项轮进行选择。我们会不会通过 hack 选择而失去该功能？

【讨论】：

【解决方案4】：

您可以设置下拉菜单的样式等。我已经做过很多次了。就滚动条而言，按照与其他任何操作相同的方式进行操作。

【讨论】：