效果图如下：

 

　　<h2>CarsSelect</h2>

 

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

 

　　 }







本文转载自中文网