Form elements have always allowed limited styling...which is why I hate working on form display. And I started when form elements were virtually unstylable back in the Internet Explorer 4 days. Of course we've come a long way but there's one element which is still somewhat difficult to style and isn't particularly elegant: SELECT. The element looks different from OS to OS and sometimes even browser to browser -- not ideal.
表单元素始终允许样式受限……这就是为什么我讨厌在表单显示上工作。 我从4天后Internet几乎无法样式化表单元素开始。 当然，我们已经走了很长一段路，但是有一个元素在样式上仍然有些困难并且并不是特别优雅： SELECT 。 元素因操作系统而异，有时甚至因浏览器而异-并不理想。
I recently found an awesome jQuery plugin to make the SELECT element more presentable, elegant, and stylable: Quick[select]. Quick[select] turns SELECT options into clickable buttons with a traditional SELECT as a fallback.
我最近找到了一个很棒的jQuery插件，以使SELECT元素更美观，更优雅且更具样式： Quick [select] 。 快速[选择]将SELECT选项变成可点击的按钮，并以传统的SELECT作为后备选项。
View Demo 观看演示Quick[select] comes with a base stylesheet but you can style the option "buttons" in any way you'd like, as you can see in my demo. Here are my basic styles:
Quick [select]带有基本样式表，但是您可以按照自己的方式对“按钮”选项进行样式设置，如在我的演示中所见。 这是我的基本风格：
.btn-group .btn { border: 1px solid #ccc; background: #eee; padding: 4px; border-radius: 4px; margin: 0 10px 0 0; font-size: 14px; display: inline; transition: background .3s, border-color .3s; } .btn-group .btn.active { background: #7ac9ed; border-color: #0c7bb6; }Quick[select] also has a helper for bootstrapped-driven sites, if that's your stack.
Quick [select]也有一个用于引导驱动站点的帮助程序(如果这是您的堆栈)。
Using Quick[select] is easy: add the plugin to the page and then use the jQuery plugin syntax to create instances for given SELECT elements:
使用Quick [select]很容易：将插件添加到页面，然后使用jQuery插件语法为给定的SELECT元素创建实例：
jQuery('#wakeup-time').quickselect({ activeButtonClass: 'btn-primary active', breakOutValues: ['06:30', '07:00', '07:30', '08:00'], buttonClass: 'btn btn-default', selectDefaultText: 'Other', wrapperClass: 'btn-group' });The most important option is breakOutValues which generates clickable buttons for popular choices (specified by you) within the SELECT element. You'll also want to set a custom selectDefaultText value for when the button which triggers the full display of the options.
最重要的选项是breakOutValues ，它为SELECT元素内的流行选择(由您指定)生成可单击的按钮。 您还想为按钮触发选项的完整显示时设置自定义的selectDefaultText值。
View Demo 观看演示Quick[select] is the best SELECT alternative that I've seen in a long time. This plugin allows for elegant, stylish, and usable SELECT elements. Go check it out and do your users a favor!
Quick [select]是我很长时间以来见过的最好的SELECT选择。 该插件允许优雅，时尚和可用的SELECT元素。 去检查一下，对您的用户有所帮助！
翻译自: https://davidwalsh.name/quick-select
相关资源：jdk-8u281-windows-x64.exe