select下拉美化css+html

select下拉美化css+html
⽤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辅助）。