有没有办法在 IE 6 上通过 CSS 增强 HTML <select> 及其 <option> ？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/182035/
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
Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?
提问by paulgreg
Internet explorer 6 seems totally ignore CSS classes or rules on select, option or optgroup tags.
Internet Explorer 6 似乎完全忽略了关于 select、option 或 optgroup 标签的 CSS 类或规则。
Is there a way to bypass that limitation (except install a recent version of IE) ?
有没有办法绕过这个限制（除了安装最新版本的 IE）？
Edit: to be more precise, I'm trying to build a hierarchy between options like that example:
编辑：更准确地说，我正在尝试在诸如该示例的选项之间建立层次结构：
Here's the HTML snippet :
这是 HTML 片段：
<select name="hierarchicalList" multiple="multiple">
<option class="group niv0">Os developers</option>
<option class="group niv1">Linux</option>
<option class="user niv2">Linus Torvald</option>
<option class="user niv2">Alan Cox</option>
<option class="group niv1">Windows</option>
<option class="user niv2">Paul Allen</option>
<option class="user niv2">Bill Gates</option>
<option class="group niv1">Mac Os</option>
<option class="user niv2">Steve Wozniaz</option>
</select>
And here's CSS rules, that works fine on a recent browser (like FF3) but not working at all on IE6 :
这是 CSS 规则，它在最近的浏览器（如 FF3）上运行良好，但在 IE6 上根本不起作用：
select option {
line-height: 10px;
}
select option.group {
font-weight: bold;
background: url(path_to_group_icon.gif) no-repeat;
padding-left: 18px;
}
select option.user {
background: url(path_to_user_icon.gif) no-repeat;
padding-left: 18px;
}
select option.niv0 { margin-left: 0px; }
select option.niv1 { margin-left: 10px; }
select option.niv2 { margin-left: 20px; }
采纳答案by Matt
This won't do exactly what you want, but rather than using CSS, you could just use a number of
这不会完全符合您的要求，但您可以不使用 CSS，而是使用一些
  ;
for the indents, or dashes so:
对于缩进或破折号：
Level 1
1级
-Level 2
- 2级
--Level 3
--级别 3
etc.
等等。
If you don't particularly like that, you could surround them with
如果你不是特别喜欢那样，你可以用
<!--[if lt IE 7]><![endif]-->
or
或者
<!--[if IE 6]><![endif]-->
So it would look like
所以它看起来像
Level 1
<!--[if lt IE 7]>-<![endif]-->Level 2
<!--[if lt IE 7]>--<![endif]--> Level 3
Then you could have the CSS for modern browsers.
然后你就可以拥有适用于现代浏览器的 CSS。
回答by domgblackwell
A very detailed guide to what does and does not work with form element styling is in the articles hereand here. From my commercial experience cross-browser form layouts that work on IE6 are not imposssible (although you do need to test carefully). An executive summary is that you can control sizes and colours but trying to micro-manage things like text alignment is a losing battle.
此处和此处的文章中提供了非常详细的指南，说明哪些内容适用于表单元素样式，哪些内容不适用。根据我的商业经验，在 IE6 上工作的跨浏览器表单布局并非不可能（尽管您确实需要仔细测试）。执行摘要是您可以控制大小和颜色，但尝试对文本对齐等进行微观管理是一场失败的战斗。
回答by Matt
Take a look at the optgroup tag to group entries inside a select tag. Look here: http://www.netmechanic.com/news/vol4/html_no20.htmfor an example
看一下 optgroup 标签，以对 select 标签内的条目进行分组。看这里：http: //www.netmechanic.com/news/vol4/html_no20.htm例如
回答by paulgreg
From MSDN reference:
从MSDN 参考：
Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing SELECT element as a whole.
除了背景颜色和颜色，通过样式对象为选项元素应用的样式设置将被忽略。此外，直接应用于单个选项的样式设置会覆盖应用于整个包含 SELECT 元素的样式设置。
Ok, so... There's no way to get that working on IE...
好的，所以......没有办法让它在 IE 上工作......
Thanks Matt for the nbsp; idea. I will surely use that work-around.
感谢马特的 nbsp; 主意。我肯定会使用这种变通方法。
回答by Gene
IE6 css implementation for options is buggy (as is the css implementation as a whole for IE6) But you CAN style options with css. I just tested changing option and select tags bgcolor and it worked as expected. The only component I know of that can not be styled is the file input.
IE6 css 选项的实现有问题（就像 IE6 的 css 实现一样）但是你可以用 css 样式选项。我刚刚测试了更改选项并选择标签 bgcolor 并且它按预期工作。我所知道的唯一不能设置样式的组件是文件输入。
回答by CJM
Yes you can style them (to some extent). I sometimes change the font, background-color and color styles.
是的，您可以设置它们的样式（在某种程度上）。我有时会更改字体、背景颜色和颜色样式。
What were you trying to achieve?
你想达到什么目的？
CSS and HTML snippets would be useful.
CSS 和 HTML 片段会很有用。
回答by Diodeus - James MacFarlane
You could emulate the whole thing using a drop-down menu script instead. It would give you complete control.
您可以使用下拉菜单脚本来模拟整个过程。它会给你完全的控制权。
