checkbox不顯示，試試去掉-webkit-appearance這個樣式
阿新 • • 發佈：2018-09-11
表單 media tab 代碼 解決 search 兼容 reset 是否
目前在項目中發現一個大坑，搞的我找了好久不知道因為什麽，自用的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尚不明確
checkbox不顯示，試試去掉-webkit-appearance這個樣式