select修改三角默認樣式
下拉標簽右側小三角怎么修改樣式？？？
草莓歐巴
2016-12-08
4 回答
舉報
0/150
提交
取消
2016-12-08
舉報
2016-12-08
原理是將瀏覽器默認的下拉框樣式清除，然后應用上自己的，再附一張向右對齊小箭頭的圖片即可。
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; }
2016-12-08
<!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復制出的代碼，我把它的樣式清除注釋了之后就能看到那個三角箭頭了
2016-12-08
select 不能修改三角樣式吧
2016-12-08
找到了
先清除樣式：
appearance:none;?
? -moz-appearance:none;?
? -webkit-appearance:none;