在手機端的 web 開發中,下拉框是一個非常常見的組件。而其中,蘋果手機下拉框的樣式和其他手機的下拉框樣式有所不同,蘋果手機下拉框的樣式使用了原生的樣式。
select{ -webkit-appearance:none; box-sizing:border-box; background: transparent url('../images/dropdown_arrow.png') no-repeat right center/10%; border: 1px solid #ccc; padding: 10px; border-radius: 4px; }
在樣式中,我們使用了-webkit-appearance:none;
屬性來隱藏蘋果手機的原生樣式。然后,我們使用了background: transparent url('../images/dropdown_arrow.png') no-repeat right center/10%;
來設置背景樣式,其中的../images/dropdown_arrow.png
是一個下拉箭頭的圖片,使用了相對路徑,可以根據自己的項目修改路徑。
同時,我們設置了box-sizing:border-box;
來設置盒模型。還有一個border-radius: 4px;
屬性來增加圓角效果。這里的樣式和其他的組件樣式一樣,可以根據實際需求進行修改。
這樣我們就可以在蘋果手機下拉框中使用自定義的樣式了。
下一篇css蘋果人臉錄入動圖