select 下拉美化 css+html

標籤：script   箭頭   add   sse   定義   div+css   osi   java   下拉框   

用cssselect下拉框的美化
這個可以換種方式實現，首先select的樣式每個瀏覽器都有其預設的樣式，需要先去除這些預設樣式，其次，select裡面的樣式諸如箭頭，下拉框等等的樣式，這裡提供一種思路，就是在select的外層添加一個div，對這個div元素設定樣式，select元素則是沒樣式，從而達到一種掩眼法的效果，實現方式如下：
<!-- html 布局 -->
<div id="selectStyle">
<select id="select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</div>

首先要去掉 #select 的預設樣式：
/* 去掉預設樣式，設定新的樣式 */
#select{
display:block;
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:1px solid #222;
outline:none;
-webkit-appearance:none;
padding:0 5px;
line-height:inherit;
color:inherit;
cursor:default;
font-size:14px;
position:relative;
z-index:3;
}
#select option{
color:#222;
}
#select option:hover{
color:#fff;
}
#select option:checked{
background:#535353;
color:#fff; 
}

然後在外層div#selectStyle設定自訂樣式
#selectStyle{
display:block;
margin:0 auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353 url("箭頭圖片地址") right center no-repeat;
background-size:auto 80%;
color:#fff;
line-height:2;
/* 如果不想加圖片，
則可以設定一個自己的三角形樣式，
如下的自訂方式，
見代碼1 */
position:relative;
z-index:1;
}
/* 代碼1 */
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#fff transparent transparent transparent;
content:"";
}
/* 代碼1 */
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#535353 transparent transparent transparent;
content:"";
}

以上就是自訂select樣式的方法；
同時也可以完全不要select這個元素使用div+css來自訂一個跟select一樣效果的下拉框（需要Javascript輔助）。

select 下拉美化 css+html