利用css新属性appearance优化select下拉框

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>利用css新属性appearance优化select下拉框</title>

 <style type="text/css">

 body{ padding:100px;}

 select{ border:1px solid #ccc;

         padding-right:30px;

         appearance:none;

         -moz-appearance:none; /* Firefox */

         -webkit-appearance:none; /* Safari and Chrome */

         background:url(images/ico.png) no-repeat right center;

         }

 select::-ms-expand {

   display: none;

 }

 </style>

 </head>

 <body>

 <select>

 <option value="ec3bd039-f3a5-e411-8154-5404a6f3ab2f">所有分类</option>

 <option value="bbf39f6f-f4a5-e411-8154-5404a6f3ab2f">食品</option>

 </select>

 </body>

 </html>

收到网上一篇文章的启发：http://www.cnblogs.com/PeunZhang/p/3522603.html

04-20 19:09