checkbox不顯示,試試去掉-webkit-appearance這個樣式

自用的reset.css中加入了 -webkit-appearance: none;其他所有表單沒有出現問題,但checkbox會不顯示

說明:

改變按鈕和其他控件的外觀,使其類似於原生控件。

  • -webkit-appearance 是一個 不規範的屬性(unsupported WebKit property),它沒有出現在 CSS 規範草案中。
  • 此屬性非標準且渲染效果在不同瀏覽器下不同,有些屬性值甚至不支持,請慎用。

語法:

-webkit-appearance:none | button | button-bevel ....

默認值:none

取值:

-webkit-appearance取值   介紹 Chrome Safari iOS Safari Android Browser
none   去除系統默認appearance的樣式,常用於IOS下移除原生樣式 支持 支持 支持 支持
button   渲染成button的風格 支持 支持 支持 支持
button-bevel   渲染成button-bevel的風格 支持 支持 不支持 不支持
caret   渲染成caret的風格 支持 支持 不支持 不支持
checkbox   渲染input:checkbox樣式的複選框按鈕 支持 支持 支持 支持
listbox   渲染爲listbox樣式的複選框按鈕 支持 支持 支持 支持
listitem   渲染成listitem的風格 支持 支持 不支持 不支持
media-fullscreen-button   渲染成media-fullscreen-button的風格 不支持 不支持 不支持 不支持
media-mute-button   渲染成media-mute-button的風格 支持 支持 不支持 不支持
media-seek-back-button   渲染成media-seek-back-button的風格 不支持 支持 不支持 不支持
media-seek-forward-button   渲染成media-seek-forward-button的風格 不支持 支持 不支持 不支持
media-slider   渲染成media-slider的風格 支持 支持 不支持 不支持
media-sliderthumb   渲染成media-sliderthumb的風格 支持 支持 不支持 不支持
menulist   渲染成menulist的風格 支持 支持 不支持 不支持
menulist-button   渲染成menulist-button的風格 支持 支持 支持 不支持
menulist-text   渲染成menulist-text的風格 支持 支持 不支持 不支持
menulist-textfield   渲染成menulist-textfield的風格 支持 支持 不支持 不支持
push-button   渲染成push-button的風格 支持 支持 支持 支持
radio   渲染成radio的風格 支持 支持 支持 支持
searchfield   渲染成searchfield的風格 支持 支持 不支持 支持
searchfield-cancel-button   渲染成searchfield-cancel-button的風格 支持 支持 不支持 支持
searchfield-decoration   渲染成searchfield-decoration的風格 支持 支持 不支持 不支持
searchfield-results-button   渲染成searchfield-results-button的風格 不支持 支持 不支持 不支持
searchfield-results-decoration   渲染成searchfield-results-decoration的風格 不支持 支持 不支持 不支持
slider-horizontal   渲染成slider-horizontal的風格 支持 支持 支持 支持
slider-vertical   渲染成slider-horizontal的風格 支持 支持 支持 支持
sliderthumb-horizontal   渲染成sliderthumb-horizontal的風格 支持 支持 支持 支持
sliderthumb-vertical   渲染成sliderthumb-vertical的風格 支持 支持 支持 支持
square-button   渲染成square-button的風格 支持 支持 支持 支持
textarea   渲染成textarea的風格 支持 支持 不支持 支持
textfield   渲染成textfield的風格 支持 支持 不支持 支持
scrollbarbutton-down   渲染成scrollbarbutton-down的風格 不支持 不支持 不支持 不支持
scrollbarbutton-left   渲染成scrollbarbutton-left的風格 不支持 不支持 不支持 不支持
scrollbarbutton-right   渲染成scrollbarbutton-right的風格 不支持 不支持 不支持 不支持
scrollbargripper-horizontal   渲染成scrollbargripper-horizontal的風格 不支持 不支持 不支持 不支持
scrollbargripper-vertical   渲染成scrollbargripper-vertical的風格 不支持 不支持 不支持 不支持
scrollbarthumb-horizontal   渲染成scrollbarthumb-horizontal的風格 不支持 不支持 不支持 不支持
scrollbarthumb-vertical   渲染成scrollbarthumb-vertical的風格 不支持 不支持 不支持 不支持
scrollbartrack-horizontal   渲染成scrollbartrack-horizontal的風格 不支持 不支持 不支持 不支持
scrollbartrack-vertical   渲染成scrollbartrack-horizontal的風格 不支持 不支持 不支持 不支持

兼容性:

  • 對應的firefox可以使用 -moz-appearance屬性
  • iOS 2.0及更高版本的Safari瀏覽器可用
  • Android尚不明確
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章