如何风格的select一个HTML“select”？
这是我的html：
<select id="ddlProducts" name="ddProducts"> <option>Product1 : Electronics </option> <option>Product2 : Sports </option> </select> 现在，我想要的是使产品的名称（即“产品1”，“产品2”等）粗体，并将其类别（即电子产品，体育等）以斜体表示，仅使用CSS。 我发现了一个大约一年的类似问题，但正如前面提到的那样，使用HTML和CSS是不可能的。 希望现在有一个解决scheme。 任何暗示，怪癖或诡计将不胜感激。 谢谢。
一般来说，你不能。 该元素由操作系统呈现，而不是HTML。 它不能通过CSS风格。 有替代插件，看起来像一个select，但实际上是由可定制的常规HTML元素组成。
不，这是不可能的，因为这些元素的样式是由用户的操作系统来处理的。 MSDN将在这里回答你的问题 ：
除了
background-color和color，通过选项元素的样式对象应用的样式设置将被忽略。
您可以在某种程度上设置选项元素的样式。
使用CSS标签，您可以设置系统绘制的框内的选项。
例：
#ddlProducts * { border-radius:15px; background-color:red; }
这看起来像这样：
我find并使用了这个样式select和选项的好例子。你可以用这个select你想要的。这里是小提琴
HTML
<select id="selectbox1"> <option value="">Select an option…</option> <option value="aye">Aye</option> <option value="eh">Eh</option> <option value="ooh">Ooh</option> <option value="whoop">Whoop</option> </select> <select id="selectbox2"> <option value="">Month…</option> <option value="january">January</option> <option value="february">February</option> <option value="march">March</option> <option value="april">April</option> <option value="may">May</option> <option value="june">June</option> <option value="july">July</option> <option value="august">August</option> <option value="september">September</option> <option value="october">October</option> <option value="november">November</option> <option value="december">December</option> </select>
CSS
body { padding:50px; background-color:white; } .s-hidden { visibility:hidden; padding-right:10px; } .select { cursor:pointer; display:inline-block; position:relative; font:normal 11px/22px Arial, Sans-Serif; color:black; border:1px solid #ccc; } .styledSelect { position:absolute; top:0; right:0; bottom:0; left:0; background-color:white; padding:0 10px; font-weight:bold; } .styledSelect:after { content:""; width:0; height:0; border:5px solid transparent; border-color:black transparent transparent transparent; position:absolute; top:9px; right:6px; } .styledSelect:active, .styledSelect.active { background-color:#eee; } .options { display:none; position:absolute; top:100%; right:0; left:0; z-index:999; margin:0 0; padding:0 0; list-style:none; border:1px solid #ccc; background-color:white; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0 1px 2px rgba(0, 0, 0, 0.2); } .options li { padding:0 6px; margin:0 0; padding:0 10px; } .options li:hover { background-color:#39f; color:white; }
JS
// Iterate over each select element $('select').each(function () { // Cache the number of options var $this = $(this), numberOfOptions = $(this).children('option').length; // Hides the select element $this.addClass('s-hidden'); // Wrap the select element in a div $this.wrap('<div class="select"></div>'); // Insert a styled div to sit over the top of the hidden select element $this.after('<div class="styledSelect"></div>'); // Cache the styled div var $styledSelect = $this.next('div.styledSelect'); // Show the first select option in the styled div $styledSelect.text($this.children('option').eq(0).text()); // Insert an unordered list after the styled div and also cache the list var $list = $('<ul />', { 'class': 'options' }).insertAfter($styledSelect); // Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) { $('<li />', { text: $this.children('option').eq(i).text(), rel: $this.children('option').eq(i).val() }).appendTo($list); } // Cache the list items var $listItems = $list.children('li'); // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again) $styledSelect.click(function (e) { e.stopPropagation(); $('div.styledSelect.active').each(function () { $(this).removeClass('active').next('ul.options').hide(); }); $(this).toggleClass('active').next('ul.options').toggle(); }); // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item // Updates the select element to have the value of the equivalent option $listItems.click(function (e) { e.stopPropagation(); $styledSelect.text($(this).text()).removeClass('active'); $this.val($(this).attr('rel')); $list.hide(); /* alert($this.val()); Uncomment this for demonstration! */ }); // Hides the unordered list when clicking outside of it $(document).click(function () { $styledSelect.removeClass('active'); $list.hide(); }); });
编辑：我发现这个很棒的库取代HTML中的标准“select”元素与精美风格的“select”元素： Select2 – https://select2.github.io/examples.html
在2011年，你可能还没有能够select“选项”元素的样式，但它是2015年！ 你可以完全的风格！ 我不明白从2014年的一些答案，说你不能风格！ CSS3创造奇迹。 我在我自己的代码中尝试了这个，下拉“选项”的样式就像你如何devise“select”
http://cssdeck.com/labs/styling-select-box-with-css3
这是一些示例代码！
select { padding:3px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: black; color:#888; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
为我工作。
<html> <head> <style type="text/css"> .boldoption { font-weight: bold; } </style> </head> <body> <select> <option class="boldoption">Some bold option.</option> <option>Some normal-font option.</option> </select> </body> </html>
Bootstrap允许您通过数据内容使用样式：
<select class="selectpicker"> <option data-content="<span class='label label-success'>Relish</span>">Relish</option> </select>
例如： https ： //silviomoreto.github.io/bootstrap-select/examples/
如前所述，唯一的方法是使用替代<select>function的插件。
jQuery插件列表： http ： //plugins.jquery.com/tag/select/
看看使用Select2插件的例子： http : //jsfiddle.net/swsLokfj/23/
一些属性可以为<option>标签设置样式：
-
font-family -
color -
font-* -
background-color
您也可以使用自定义字体的个人<option>标签，例如任何谷歌字体 ， 材料图标或其他图标字体从icomoon或类似的。 （这可能会方便的字体select器等）
考虑到这一点，你可以创build字体家族堆栈，并在<option>标签中插入图标，例如。
<select> <option style="font-family: 'Icons', 'Roboto', sans-serif;">a ★★★</option> <option style="font-family: 'Icons', 'Roboto', sans-serif;">b ★★★★</option> </select>
其中★是从Icons ，其余是从Roboto 。
请注意，虽然自定义字体不适用于移动select。
这是20017年，有可能针对特定的select选项。 在我的项目中，我有一个class =“variations”的表格，select选项在表格单元格td =“value”中 ，select有一个ID select＃pa_color 。 选项元素也有一个类选项=“附加” （和其他类标签）。 如果用户以批发客户身份login，他们可以看到所有的颜色选项。 但零售客户不允许购买2种颜色选项，所以我已经禁用了它们
<option class="attached" disabled>color 1</option> <option class="attached" disabled>color 2</option>
它采取了一点逻辑，但这里是我如何针对残疾人select选项。
CSS
table.variations td.value select#pa_color option.attached:disabled { display: none !important; }
因此，我的颜色选项只对批发客户可见。
其实你可以添加：之前和之后：样式。 至less是什么
option{ font-size:18px; background-color:#ffffff; } option:before{ content: ">"; font-size:20px; display:none; padding-right:10px; padding-left:5px; color:#fff; } option:hover:before{ display:inline; }
如上所述，不是真的可能; 然而，如果您只想在用户与该字段进行交互之前为“select产品…”选项设置初始状态，则可以执行下面的操作 –
下面的示例样式（技术上所有）第一个选项是红色的，一旦用户交互，将删除该选项（其值=“defaultValue”设置），并删除应用于select的类。 除颜色外，还可以应用其他选项，但这些选项只会影响已更改的字段，而不会影响列表视图。
CSS
.default-value{ color: red; }
jQuery的
$("select").addClass('default-value'); $("select").bind("focus", function () { $(this).children('option[value="defaultValue"]').remove(); $(this).removeClass('default-value'); });
