CSS：样式 HTML <select> 多项选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6725997/
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
CSS: Style HTML <select> multiple-choice elements
提问by Nathan
I'm using some <select row="3" multiple="multiple">elements on a page.
我在<select row="3" multiple="multiple">页面上使用了一些元素。
I've been trying to style them so that the text inside matches the rest of the page.
I started with changing the font (select {font-family: 'foo';}). But, I need an increased font-size and line-height for the new font. And it isn't letting me change that. I've tried using inline styles, styling the select, and styling the options.
我一直在尝试设置它们的样式，以便里面的文本与页面的其余部分相匹配。
我从更改字体 ( select {font-family: 'foo';}) 开始。但是，我需要为新字体增加字体大小和行高。它不允许我改变这一点。我尝试过使用内联样式、select设置options样式和设置s样式。
How can I change properties like font-sizeand line-heightinside a <select>box?
我怎样才能改变性质喜欢font-size和line-height一个内<select>盒？
回答by Jules
Unfortunately not all browsers allow you to change the layout of SELECT or OPTION items.
不幸的是，并非所有浏览器都允许您更改 SELECT 或 OPTION 项目的布局。
You could say that it's probably better to leave styling of select boxes, optgroup and options alone and just leave them as the defaults because cross browser styling is so inconsistent it's not worth the bother.
您可以说最好保留选择框、选项组和选项的样式，而将它们保留为默认值，因为跨浏览器样式是如此不一致，不值得费心。
Good website explaining you the things that CANbe styled is the following: Table containing all info you need.
好网站解释你的东西CAN设置样式如下：包含所有你需要的信息表。
Your HTML:
你的 HTML：
<select multiple="multiple">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
Your CSS (example):
您的 CSS（示例）：
select {
font-family: 'Times New Roman';
}
select option {
background-color: #FFFF00;
color: #FF0000;
}
回答by Ray Toal
Results may be OS dependent as well as browser-dependent. Even though CSS styles can be applied to select and options elements, I can see that some browsers (especially old ones) might just defer to the OS to display these widgets.
结果可能与操作系统有关，也可能与浏览器有关。尽管 CSS 样式可以应用于 select 和 options 元素，但我可以看到某些浏览器（尤其是旧浏览器）可能只是遵从操作系统来显示这些小部件。
This is a similar question to How to style a <select> dropdown with CSS only without JavaScript?.
这是与如何在没有 JavaScript 的情况下仅使用 CSS 设置 <select> 下拉列表样式的问题类似的问题？.
回答by Matt Fletcher
I'm amazed that no-one has mentioned Chosenyet.
我很惊讶还没有人提到Chosen。
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
All modern desktop browsers are supported (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled. Chosen is disabled on iPhone, iPod Touch, and Android mobile devices.
Chosen 是一个 jQuery 插件，它使长而笨重的选择框更加用户友好。
支持所有现代桌面浏览器（Firefox、Chrome、Safari 和 IE9）。还启用了对 IE8 的旧版支持。选择在 iPhone、iPod Touch 和 Android 移动设备上被禁用。
Because it replaces the select element with a div and then binds all events between the two, you can style it however you so wish and it will still react as if it were a normal select box. Pretty cool.
因为它用一个 div 替换了 select 元素，然后绑定了两者之间的所有事件，所以你可以随意设置它的样式，它仍然会像普通的选择框一样做出反应。很酷。
