怎么使用純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”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！