select修改三角默认样式
草莓欧巴
2016-12-08 11:40
下拉标签右侧小三角怎么修改样式？？？
4回答
-
- 6亿少女的梦
- 2016-12-08 11:56:37
原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。
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; } -
- shihao丶H
- 2016-12-08 13:23:05
<!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复制出的代码，我把它的样式清除注释了之后就能看到那个三角箭头了
-
- shihao丶H
- 2016-12-08 12:49:15
select 不能修改三角样式吧
-
- 草莓欧巴
- 2016-12-08 11:53:40
找到了
先清除样式：
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
初识HTML(5)+CSS(3)-升级版
1225297 学习 · 18230 问题
相似问题