select修改三角默认样式
下拉标签右侧小三角怎么修改样式？？？
草莓欧巴
2016-12-08
4 回答
原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。
select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: solid 1px #000;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
border: solid 1px #000;
.choseLanguage {
width: 80px;
height: 32px;
float: left;
text-align: right;
margin-left: 40px;
margin-top: 12px;
float: left;
font-size: 14px;
}
.se {
width: 70px;
height: 32px;
float: left;
text-align: right;
float: left;
font-size: 14px;
}
.trangle {
width: 0;
height: 0;
margin-top: 5px;
margin-left: 1px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #FFFFFF;
float: left;
}
.selectLanguage {
background-color: #1e4a7e;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
border: 0;/*border:none;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;*/
}
.optionLangeuage {
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div class="choseLanguage">
<div class="se">
<select class="selectLanguage">
<option class="optionLangeuage">简体中文</option>
<option class="optionLangeuage">English</option>
</select>
</div>
<div class="trangle"></div>
<!--设置三角形白色DIV-->
</div>
</body>
</html>
这是在http://www.cnblogs.com/fhychzu/p/5286704.html复制出的代码，我把它的样式清除注释了之后就能看到那个三角箭头了
举报
0/150
提交
取消
