1. 程式人生 > >select框預設樣式去除(隱藏的小圖示顯示)

select框預設樣式去除(隱藏的小圖示顯示)

CSS程式碼

/*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/
          select::-ms-expand { display: none; }          
         .info-select{
            width: 12%;
            margin-left: 64%;
            border: none;
            outline: none;
            /*將預設的select選擇框樣式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            -ms-appearance:none;
           /*在選擇框的最右側中間顯示小箭頭圖片*/
           background: url(../img/arrow.png) no-repeat scroll right center transparent;           
         }

HTML程式碼

 <select class="info-select">
       <option selected="selected">北京</option>
        <option>上海</option>
  </select>