1. 程式人生 > >修改select樣式

修改select樣式

git -a ati hang lac .net otn fire -s

CSS就可以解決,原理是將瀏覽器默認的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。

  1. select {
  2. /*Chrome和Firefox裏面的邊框是不一樣的,所以復寫了一下*/
  3. border: solid 1px #000;
  4. /*很關鍵:將默認的select選擇框樣式清除*/
  5. appearance:none;
  6. -moz-appearance:none;
  7. -webkit-appearance:none;
  8. /*在選擇框的最右側中間顯示小箭頭圖片*/
  9. background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
  10. /*為下拉小箭頭留出一點位置,避免被文字覆蓋*/
  11. padding-right: 14px;
  12. }
  13. /*清除ie的默認選擇框樣式清除,隱藏下拉箭頭*/
  14. select::-ms-expand { display: none; }

參考鏈接:
http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/

修改select樣式