怎么使用纯css美化select

这篇文章主要介绍“怎么使用纯css美化select”，在日常操作中，相信很多人在怎么使用纯css美化select问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用纯css美化select”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　<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;

　　 }

到此，关于“怎么使用纯css美化select”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！