怎么使用纯css美化select
导读：本文共1284.5字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： <h3>CarsSelect</h3> <divclass="select"> <selectname="cars"> <optionvalue="volvo">Volvo</option... ...
目录
(为您整理了一些要点),点击可以直达。<h3>CarsSelect</h3>
<divclass="select">
<selectname="cars">
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<optionvalue="opel"selected>Opel</option>
<optionvalue="audi">Audi</option>
</select>
</div>
body{
font-size:20px;
color:#090;
background-color:#eee;
text-align:center;
}
.select{
display:inline-block;
width:300px;
position:relative;
vertical-align:middle;
padding:0;
overflow:hidden;
background-color:#fff;
color:#555;
border:1pxsolid#aaa;
text-shadow:none;
border-radius:4px;
transition:box-shadow0.25sease;
z-index:2;
}
.select:hover{
box-shadow:01px4pxrgba(0,0,0,0.15);
}
.select:before{
content:"";
position:absolute;
width:0;
height:0;
border:10pxsolidtransparent;
border-top-color:#ccc;
top:14px;
right:10px;
cursor:pointer;
z-index:-2;
}
.selectselect{
cursor:pointer;
padding:10px;
width:100%;
border:none;
background:transparent;
background-image:none;
-webkit-appearance:none;
-moz-appearance:none;
}
.selectselect:focus{
outline:none;
}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">怎么使用纯css美化select的详细内容，希望对您有所帮助，信息来源于网络。