select 样式优化(不兼容10 以下)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
      select {
    border: solid 1px #000;
  
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    padding-right: 14px;

    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;

}


select::-ms-expand { display: none; }
  </style>
</head>
<body>

  <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>    
  </select>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » select 样式优化(不兼容10 以下)

赞 (1)
分享到:更多 ()

发表评论 0