使用純css更改下拉選單的預設樣式
阿新 • • 發佈:2018-12-09
目標樣式:
程式碼:
<form> <select> <option>中國</option> </select> <select> <option>濮陽市</option> </select> <select> <option>南樂縣</option> </select> <select> <option>韓張鎮</option> <option>韓張</option> </select> <a href="#"><span class="so">搜尋</span></a> </form>
select{
border: 0; /*取消邊框*/
width: 200px;
height: 40px;
background-color: white; /*背景可以改為一張圖片*/
color: rgba(132, 133, 144, 0.8);
font-size: 20px;
-webkit-appearance: none; /*取消小三角的顯示*/
text-indent: 0.01px; /*僅僅為了美觀*/
background-image: url(../45.jpg); /*你要替換後的小三角連結*/
background-repeat: no-repeat; /*不解釋,但是別忘了*/
background-position: 170px 10px; /*把小三角放到該放的地方*/
margin: 0 20px;
}
span.so{ /*******以下為按鍵,與下拉框無關*******/
display: inline-block;
width: 200px;
font-size: 20;
text-align: center;
line-height: 40px;
color: white;
background-color:#e45353;
}