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


目前在項目中發現一個大坑,搞的我找了好久不知道因為什么,自用的reset.css中加入了 -webkit-appearance: none;其他所有表單沒有出現問題,但checkbox會不顯示,值改為checkbox或去掉該樣式之后問題解決,不知道是否為瀏覽器更新之后出現的bug,因為以前並沒有出現過類似問題。

chrome 68.0.3440.106(正式版本)

 

 

說明:

改變按鈕和其他控件的外觀,使其類似於原生控件。
  • -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尚不明確


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM