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尚不明確