使用 jQuery 的简单方法样式选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14867742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easy way styling select box using jQuery
提问by jhunlio
Is there any easy way to add a style to a select box in a formusing jQuery?
有没有什么简单的方法可以在form使用 jQuery的选择框中添加样式？
<select>
<option>sample</option>
<option>sample1</option>
</select>
Thanks.
谢谢。
回答by user1728278
You can alternatively use jQuery.SimpleSelect, which is nothing less than a very simple and lightweight (1.75kb gzipped) plugin that will transform your <select>elements into a bunch of divs you'll be able to style however you want using CSS.
您也可以使用jQuery.SimpleSelect，它是一个非常简单和轻量级（1.75kb gzipped）插件，它将您的<select>元素转换为一堆 div，您可以使用 CSS 随意设置样式。
It's as simple as that:
就这么简单：
HTML
HTML
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>?
JavaScript
JavaScript
$("select").simpleselect();
And (with default styles that you can obviously customize), it gives you this:
并且（使用您显然可以自定义的默认样式），它为您提供：
回答by Steve
回答by Sandip
Try easy styling select box using jquery
使用 jquery 尝试简单的样式选择框
<select class="selectboxdiv">
<option>choose preset...</option>
<option>two</option>
<option>something</option>
<option>4</option>
<option>5</option>
</select>
<div class="out"></div>
回答by Muhammad Talha Akbar
You cannot style the <select>node but you can visually represent styled <ul>node that it is a dropdown menu. Just When the page loads hide the original dropdown menu and create one by forming a list by <ul>tag. And when the user click on <li>node then change also the value of <select>tag.
您不能为<select>节点设置样式，但您可以直观地表示<ul>它是一个下拉菜单的样式节点。当页面加载时隐藏原始下拉菜单并通过按<ul>标签形成列表来创建一个。当用户单击<li>节点时，也会更改<select>标签的值。
回答by darshanags
回答by pai.not.pi
You cannot style the <select>tag. Trying wrapping them around with some HTML and you can style/script your HTMLs as you need.
您无法设置<select>标签样式。尝试用一些 HTML 包裹它们，您可以根据需要设置 HTML 的样式/脚本。
You can do something like this (in jQuery), wrap your <select>with some markup,
你可以做这样的事情（在 jQuery 中），<select>用一些标记包裹你，
<div class="selectBox">
<ul>
<li></li>
<li></li>
</ul>
<select>
<option></option>
<option></option>
</ul>
</div>
And then map <li>changes to <option>changes in your script.
然后将<li>更改映射到<option>脚本中的更改。
