Question

HTML select 怎么修改样式 主流浏览器和IE7+

Answer 1

这个是css hack的内容，兼容浏览器一直都是web开发人员要处理的一个问题，一般有两种途径可以实现兼容性，一种就是写通用性的样式，所有的浏览器都用一种样式；一种就是针对某个浏览器针对性写样式，就是ie下一个样式，ff下一个样式，chrome一个样式这种

目前css hack主要就是第二种，如果针对特定的浏览器进行设置

下面是demo

利用【区别符号】：「\9」、「*」、「_」针对css进行设置，将属性替换成下面的属性，后面加入区别符号，就可以对于ie7+和其他主流浏览器进行兼容了

 #divcss5{
background:red \9; /*IE8+ 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

  

 【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

Answer 2

<div class="fl form-select" style="">
<p class="selected">类目4</p>
<ul class="list" style="display: none;">
<li class="item" title="类目1" data-val="0">类目1</li>
<li class="item" title="类目2" data-val="1">类目2</li>
<li class="item" title="类目3" data-val="2">类目3</li>
<li class="item" title="类目4" data-val="3">类目4</li>
<li class="item" title="类目5" data-val="4">类目5</li>
<li class="item" title="类目6" data-val="5">类目6</li>
</ul>
<input type="hidden" value="3">
</div>
css样式：css样式：
.form-select {position: relative; left: 0;top: 0; min-width: 188px; height: 30px;border: 1px solid #cccccc;color: #888888; line-height: 14px;background: url("") no-repeat scroll right center transparent;z-index: 2;}
.form-select p { padding-right: 40px; padding-left: 10px;}
.form-select ul.list { width: 100%;border: 1px solid #cccccc; position:absolute; left: -1px; top: 31px; z-index: 9999; background-color: #ffffff; overflow: auto; max-height:192px; }
.form-select li { height: 32px; line-height: 32px; padding: 0 40px 0 10px;}
.form-select li:hover { background-color: #ffcc99;}

Answer 3

不建议改样式，想要夸浏览器统一的效果，建议自己写html和css模拟。