怎么使用純css美化select

這篇文章主要介紹“怎么使用純css美化select”，在日常操作中，相信很多人在怎么使用純css美化select問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么使用純css美化select”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

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

　　 }

到此，關(guān)于“怎么使用純css美化select”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！