在Internet Explorer中设计`< select&gt ;` [英] Styling `<select>` in Internet Explorer

查看:122
本文介绍了在Internet Explorer中设计`< select&gt ;`的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在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中设计`&lt; select&gt ;`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆