样式滚动条专用于使用CSS的选择类型输入

有一个使用JQuery和CSS样式的网站。使用表单收集搜索输入并在选择框和滚动条上出现问题。样式滚动条专用于使用CSS的选择类型输入

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

样式化使用WebKit的滚动条等滚动工作得很好：

::-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添加到这一页。

赞赏任何帮助或见解。

来源

2012-06-07 user1441141

我敢肯定，你不能设计select元素，或者至少不是很好。选择这个选项会很好，但是我想要改变的值太多了，它更容易创建我自己的。只需使用可点击的元素创建div，即可更改隐藏输入的值，并可使用显示所选值的单独元素来显示和隐藏元素。我个人觉得这是最好的方法，因为你可以完全控制它，让它可以被设计成你想要的样式，但是，你也可以使用像jQuery UI这样的JavaScript UI插件来改变输入元素的样式。

来源

2012-06-07 21:48:49 jimjimmy1995

select元素可以被样式化。我粘贴的代码工作得很好。缺少的是能够对单击时创建的下拉列表进行样式设置。没有元素，也不是DOM的一部分。滚动条不是DOM的一部分，但它们也可以用CSS来设计。令人沮丧的是，Chrome并没有在下拉框中设置* specific *滚动条的样式。所以我真正的问题是，是否存在任何特定的CSS将它的样式为Chrome？ – user1441141

无法对选择框或箭头的下拉菜单进行样式设置，只能设置文本输入区域的外观。正如我所说的，最好的方法是创建一个自定义脚本，用一个文本框和一个隐藏的div代替select元素，该div包含div来替换选项。 – jimjimmy1995

这真的取决于项目的规模，这是否值得去做。通常，用户只能看到几秒钟的下拉菜单。还有一个事实是用来查看默认的下拉菜单，而一个自定义的下拉菜单可能会令人困惑。 – jimjimmy1995

一个相关的思想是否使用JS和替代的HTML标记来实现理想的美学效果。为了美观而“黑客入侵”会在移动浏览器上产生不希望的结果吗？在iPad上，select元素的默认功能是调出一个选项选择框。我们会不会因为黑客入侵而失去这种功能？

来源

2013-06-21 18:54:39 Matt

您可以设置下拉式等，我已经做了很多次。就滚动条而言，以与其他任何事情相同的方式进行。

来源

2014-11-13 05:48:30 psiclone

样式滚动条专用于使用CSS的选择类型输入

回答

相关问题