6

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

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

4

4 回答 4

2

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

select::-webkit-scrollbar

为了让css生效，还需要设置width和height属性。下面的代码显示了正常的下拉菜单，样式化的下拉菜单，但没有宽度和高度属性，以及样式化的下拉菜单，具有宽度和高度属性来说明差异。 

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>

于 2021-01-05T05:21:42.990 回答
1

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

就我个人而言，我认为这是最好的方式，因为您可以完全控制它，从而可以根据需要设置样式，但是，您也可以使用 jQuery UI 之类的 javascript UI 插件来更改输入元素的样式。

于 2012-06-07T21:48:49.213 回答
1

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

于 2013-06-21T18:54:39.993 回答
-3

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

于 2014-11-13T05:48:30.007 回答