更改 IE 中的选项文本颜色答案

【问题标题】：Change option text color in IE更改 IE 中的选项文本颜色
【发布时间】：2012-08-19 03:53:03
【问题描述】：

我正在尝试强制选择输入选项中的文本颜色，它适用于世界上的每个浏览器，但客人什么，是的，IE 仍然不在乎样式表中的颜色。

你们知道如何强制 IE 使我的文本颜色如我所愿

这就是我的期望

这就是 IE 的作用

CSS

#footer .findProduct select{background: transparent; border:0; color:#fff!important; font-weight:700; text-transform: uppercase;  font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000!important; text-transform: uppercase;}

【问题讨论】：

标签： css internet-explorer select colors

【解决方案1】：

使用 css 样式化选择只是一个坏主意。在所有浏览器中都无法正确设置它们的样式。你所能做的就是用js模仿选择框。有可用的框架和插件。基本上他们会隐藏选择并用列表或类似选择的东西替换它们，并且您可以完全设置样式。在后台，他们将更新与列表同步的选择，以使您的表单在提交时仍然有效。您也可以自己做类似的事情（最好使用 jQuery），如果您对它有点熟悉，应该不会很难。

我猜您在屏幕截图中使用的自定义箭头按钮不起作用...

【讨论】：

实际上我会使用 -moz-appearance: none 但 Firefox 无法处理它。所以我刚刚在箭头上放置了一个图像；）
我是从按钮开始处停止的轮廓中得到的。但是，如果您单击箭头而不是选择框内会发生什么？
这就是我的观点。对 ux 来说不是很好，是吗？我会接受我的建议并选择 js 解决方案。或者干脆忘记所有关于样式化你的选择。

【解决方案2】：

您的 css 规则相互矛盾，将它们更改为：

#footer .findProduct select{background: transparent; color: #fff; border:0; font-weight:700; text-transform: uppercase;  font-family: 'Crimson Text',serif; }
#footer .findProduct select option{color:#000 !important; text-transform: uppercase;}

演示：http://jsfiddle.net/dan_barzilay/tJZek/

【讨论】：

不，一个是默认选择，另一个是单击时的选项。通过这样做，默认选择的选项是黑色的，必须是白色的
你不明白，我希望默认为白色，选项为黑色，就像第一张图片一样。现在你的例子都是黑色的。
您使用的是哪个 IE 版本，因为在 IE7、IE8 和 IE9 上它们都是黑色的。而您的 CSS 示例，您只删除了选择中的 !important ......这与我现在使用的几乎相同。