更改 <select> HTML 表单的边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/492627/
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
Change border color on <select> HTML form
提问by fuentesjr
Is it possible to change the border color on a <select/>element in an HTML form?
是否可以更改<select/>HTML 表单中元素的边框颜色？
The border-colorstyle works in Firefox but not IE.
该border-color样式适用于 Firefox，但不适用于 IE。
I could find no real answers on Google.
我在谷歌上找不到真正的答案。
回答by fuentesjr
I would consinder enclosing that select block within a div block and setting the border property like this:
我会考虑将该选择块包含在一个 div 块中并像这样设置边框属性：
<div style="border: 2px solid blue;">
<select style="width: 100%;">
<option value="Sal">Sal</option>
<option value="Awesome">Awesome!</option>
</select>
</div>You should be able to play with that to accomplish what you need.
你应该能够使用它来完成你需要的。
回答by Cerebrus
As Diodeus stated, IE doesn't allow anything but the default border for <select>elements. However, I know of two hacks to achieve a similar effect :
正如 Diodeus 所说，IE 只允许<select>元素的默认边框。但是，我知道有两种技巧可以达到类似的效果：
Use a DIV that is placed absolutely at the same position as the dropdown and set it's borders. It will appear that the dropdown has a border.
Use a Javascript solution, for instance, the one provided here.
使用与下拉菜单绝对位于同一位置的 DIV 并设置其边框。看起来下拉菜单有边框。
使用 Javascript 解决方案，例如，此处提供的解决方案。
It may however prove to be too much effort, so you should evaluate if you really require the border.
然而，这可能会被证明太费力，所以你应该评估你是否真的需要边界。
回答by Diodeus - James MacFarlane
No, the <select>control is a system-level control, not a client-level control in IE. A few versions back it didn't even play nicely-with z-index, putting itself on top of virtually everything.
不，该<select>控件是系统级控件，而不是 IE 中的客户端级控件。几个版本之前，它甚至不能很好地与 z-index 配合使用，几乎将自己置于一切之上。
To do anything fancy you'll have to emulate the functionality using CSS and your own elements.
要做任何花哨的事情，您必须使用 CSS 和您自己的元素来模拟功能。
回答by pincopallo
select{
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
}
Works for me.
为我工作。
回答by scunliffe
You can set the border color in IE however there are some issues.
您可以在 IE 中设置边框颜色，但存在一些问题。
Argh... I could have sworn you could do this... just tested and realized I wasn't correct. The notes below still apply though.
啊......我可以发誓你可以做到这一点......刚刚测试并意识到我是不正确的。不过，以下说明仍然适用。
in IE8 (Beta1 -> RC1) changing the border color or the background color/image causes a de-theming of the control in WindowsXP (the drop arrow and box look like Windows 95)
you still can't style the options within the select control very well because IE doesn't support it. (see bug #291)
在 IE8 (Beta1 -> RC1) 中更改边框颜色或背景颜色/图像会导致 WindowsXP 中的控件去主题化（下拉箭头和框看起来像 Windows 95）
您仍然无法很好地设置选择控件中的选项的样式，因为 IE 不支持它。（见错误 #291）
回答by scunliffe
Replacing the border-color with outline-color should work.
用轮廓颜色替换边框颜色应该可以工作。
