在Internet Explorer中设计`< select> ;` [英] Styling `<select>` in Internet Explorer
问题描述
如何在IE中自定义HTML < select>
的边框和背景?我可以在Firefox中使用简单的CSS设计边框样式,但显然不在IE中。
IE很可能是在怪异模式下。以前的IE版本本身并没有自己绘制 select
元素,因此无法正确设置样式(以及一些z顺序怪癖),所以在IE< 8你根本无法做到这一点,除非你在JS中重新实现类似于 select
的选择。查看开发人员工具(F12)以查看IE所在的浏览器和文档模式;如果它在浏览器模式下显示为Internet Explorer 8,而在文档模式下显示为Quirks模式,则应该正常):
以下片段适用于此(IE8β2):
<!DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // EN
http://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< style type =text / css>
选择{
border:1px纯红色;
}
< / style>
< / head>
< body>
< form>
< select>
< option> 1< / option>
< option> 2< / option>
< / select>
< / form>
< / body>
< / html>
Any way to customize the border and background of an HTML <select>
in IE? I can style the border with simple CSS in Firefox, but apparently not in IE.
IE is most likely in quirks mode. Previous versions of IE didn't draw the select
element themselves and thus it couldn't be styled properly (as well as some z-order quirks), so on IE < 8 you simply can't do it, unless you re-implement something like select
in JS. Take a look at the developer tools (F12) to see which browser and document mode IE is in; if it says "Internet Explorer 8" for the Browser mode and not "Quirks mode" for the document mode, you should be ok :)
The following snippet works fine here (IE8β2):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
select {
border: 1px solid red;
}
</style>
</head>
<body>
<form>
<select>
<option>1</option>
<option>2</option>
</select>
</form>
</body>
</html>
这篇关于在Internet Explorer中设计`< select> ;`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!