如何讓slect下拉圖標顯示在左邊
select 元素是一種表單控件可以在select中列出多選項供選擇，在前端用到比力多，可是凡是的下拉圖標都是在右側，若是有特別要求怎么來把圖標顯示左側呢？
東西/原料
- 編纂器
- 瀏覽器
- 圖標圖片
方式/步調
- 1
起首在編纂器中新成立一個html頁面，定名為select.html題目為“若何讓slect下拉圖標顯示在左邊”。
- 2
本身做一個下拉的小圖標放在該文件目次下的images的文件夾中。
- 3
在selecthtml的body中插手一個select控件，并列出兩個選項
- 4
為了能看的更清晰一些，給select控件加一個樣式設置寬為200像素，恰當的往頁面的中心調整一下。
- 5
為了加本身心猿意馬制的圖標起首將默認的select選擇框樣式斷根失落將appearance設置為none；
- 6
在樣式中插手標的目的下箭頭圖片的布景 圖片，并將圖標的位置設置在select的左邊
- 7
select的選項的文字壓在了圖標上如許是很不美不雅的，我們可以將文字標的目的右移動下，將箭頭圖標完全顯示出來
注重事項
- 先把select的默認樣式斷根失落
- 圖標和選項的距離不宜太年夜
- 發表于 2018-12-12 00:00
- 閱讀 ( 776 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章