修改select樣式
阿新 • • 發佈:2017-07-14
git -a ati hang lac .net otn fire -s
CSS就可以解決,原理是將瀏覽器默認的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。
- select {
- /*Chrome和Firefox裏面的邊框是不一樣的,所以復寫了一下*/
- border: solid 1px #000;
- /*很關鍵:將默認的select選擇框樣式清除*/
- appearance:none;
- -moz-appearance:none;
- -webkit-appearance:none;
- /*在選擇框的最右側中間顯示小箭頭圖片*/
- background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
- /*為下拉小箭頭留出一點位置,避免被文字覆蓋*/
- padding-right: 14px;
- }
- /*清除ie的默認選擇框樣式清除,隱藏下拉箭頭*/
- select::-ms-expand { display: none; }
參考鏈接:
http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/
修改select樣式