HTML中select下拉框默认样式修改
本方法只修改下拉框样式，不修改option样式，修改后的样式：
思路：
1.先去掉select本身原有的样式。
2.用一个元素（div/lebal等）作为select的父元素。
3.在select父元素后面用：after做一个新的样式。
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (DROP-DOWN)</title>
<style type="text/css">
/* SELECT W/IMAGE */
select#selectTravelCity
{
width : 14em;
height : 3.2em;
padding : 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border : 1px solid #94c1e7;
-moz-border-radius : 0.2em;
-webkit-border-radius : 0.2em;
border-radius : 0.2em;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
background : #ffffff;
font-family : SimHei;
font-size : 1.1em;
color : RGBA(102,102,102,0.7);
cursor : pointer;
}
/*SELECT W/DOWN-ARROW*/
select#selectPointOfInterest
{
width : 185pt;
height : 40pt;
line-height : 40pt;
padding-right : 20pt;
text-indent : 4pt;
text-align : left;
vertical-align : middle;
border : 1px solid #94c1e7;
-moz-border-radius : 6px;
-webkit-border-radius : 6px;
border-radius : 6px;
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
font-family : SimHei;
font-size : 18pt;
font-weight : 500;
color : RGBA(102,102,102,0.7);
cursor : pointer;
outline : none;
}
/*LABEL FOR SELECT*/
label#lblSelect{ position: relative; display: inline-block;}
/*DOWNWARD ARROW (25bc)*/
label#lblSelect::after
{
content : "25bc";
position : absolute;
top : 0;
right : 0;
bottom : 0;
width : 20pt;
line-height : 40pt;
vertical-align : middle;
text-align : center;
background : #94c1e7;
color : #2984ce;
-moz-border-radius : 0 6px 6px 0;
-webkit-border-radius : 0 6px 6px 0;
border-radius : 0 6px 6px 0;
pointer-events : none;
}
</style>
</head>
<body>
<br />
<select id="selectTravelCity" title="Select Travel Destination">
<option>去掉select原有样式</option>
<option>Washington DC</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>Phoenix</option>
</select>
<br />
<br />
<label id="lblSelect">
<select id="selectPointOfInterest" title="Select points of interest nearby">
<option>补充新的样式</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
</body>
</html>补充（2017-4-28）
还有一种方法是先去除浏览器默认的样式，然后把一个箭头的背景图片定位到右边，这里有代码示例：
http://jsbin.com/gexiwenave/edit?html,css,output，这种方法比较简单。
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 区块链的原理是什么？
- 下一篇： tp框架利用model模型CRUD操作
