CSS實現iOS選擇框可以讓網頁看起來更加簡潔美觀,下面介紹一下具體的實現方法。
首先,要對選擇框的樣式進行定義。可以使用以下樣式:
select { -webkit-appearance: none; appearance: none; background-image: url('../images/select.png'); background-size: 30px 30px; background-repeat: no-repeat; background-position: right center; padding-right: 40px; border: none; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 16px; color: #333; border-radius: 5px; height: 40px; width: 200px; }
其中,-webkit-appearance和appearance屬性會去掉原生選擇框的默認樣式,background-image指定了選擇框的背景圖片,padding-right為了保證文字和圖標之間有一定的間隔,border: none去掉了默認的邊框,font-family、font-size和color指定了文字的樣式,border-radius定義了選擇框的圓角,height和width指定了選擇框的高度和寬度。
接下來,在HTML代碼中引入這個CSS樣式:
<select> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> </select>
這樣,就實現了一個簡單的iOS選擇框。
上一篇div 內嵌cshtml
下一篇css實現側邊欄收縮