目前在项目中发现一个大坑，搞的我找了好久不知道因为什么，自用的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这个样式的更多相关文章

  1. 移动端去掉按钮button默认样式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. 下拉框等需要显示上下箭头切换的CSS样式

    下拉框等需要显示上下箭头切换的CSS样式   .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...

  3. input样式去掉苹果手机的默认样式

    /*<!---->去掉苹果短的样式*/ input[type="button"], input[type="submit"], input[type ...

  4. 【转】listView中，checkBox的显示和隐藏

    原文网址:http://www.cnblogs.com/vicma/p/3460500.html 在listView中,每个item都有一个ChexBox,当显示的时候在listView外面设置一个按 ...

  5. 【MVVM Dev】ComboBox嵌入CheckBox的显示问题

    一.前言 在ComboBox中嵌入若干个CheckBox时,当我们勾选一些CheckBox,ComboBox会显示相应的勾选项. 例如:CheckBox项有A,B,C   那么勾选这三项,ComboB ...

  6. ztree的CheckBox不显示问题解决办法

    问题: 在使用ztree插件时需要设置 zTree 的节点上是否显示 checkbox / radio,但设置后不显示复选框/单选框,如下图所示 设置方法: var setting = { check ...

  7. checkbox控制显示隐藏

    显示文本框<input type = "checkbox" id="checkbox" onclick="on_hide();"/&g ...

  8. easyui datagrid将表头的checkbox不显示（隐藏）

    <script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:&quo ...

  9. JQuery实现 checkbox 全选、反选,子checkbox有没选去掉全选

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

随机推荐

  1. 关于ML的思考讲座-周zh-11.30日

    1.深度神经网络 1.以往神经网络采用单或双隐层结构,虽然参照了生物上的神经元,但是从本质上来说还是数学,以函数嵌套形成. 2.通常使用的激活函数是连续可微(differentiable)的,sigm ...

  2. django开发项目的部署nginx

    Django 部署(Nginx) 本文主要讲解 nginx + uwsgi socket 的方式来部署 Django,比 Apache mod_wsgi 要复杂一些,但这是目前主流的方法. 1. 运行 ...

  3. mysql删除匿名用户

    首先使用命令进入数据库 [root@localhost raul]# mysql -u root -p Enter password: Welcome to the MySQL monitor. Co ...

  4. idea中使用插件Grep Console在IDEA的log的不同的级别，可以设置不同的颜色。

    一.安装. 1. 2. 3. 二,使用. 1. 2.

  5. 表单验证—html5新特性表单验证

    一.表单 <body> <section id="register"> <div><img src="images/logo.j ...

  6. Java文件IO流的操作总结

    Java中的IO操作涉及到的概念及相关类很多,很容易弄混,今天特来整理总结一下,并附上一份完整的文件操作的代码. 概念解析 读和写 流就是管道,向管道里面写数据用输出流:write 从管道里面读数据, ...

  7. Windows10系统远程桌面连接出现卡顿如何解决

    最新的windows10系统下,用户只要开启远程桌面连接,就能够轻松地操控其他电脑.但是,最近部分用户在win10中启用远程连接时,发现电脑窗口变得非常缓慢卡顿,这是怎么回事呢?其实,该问题与系统的设 ...

  8. 如何识别网页类型(wap页面还是wise页面)

    思路很简单,就是通过网页结构的一些特征来区分,当然也可以通过url的格式来区分,不过这个错误率较高,因为有很多小网站的url设计不规范. 网页特征包括两大类: 1.meta信息: 一般wap页面都会为 ...

  9. K-Means & Sequential Leader Clustering

    2017-12-31 19:08:37 k-平均算法源于信号处理中的一种向量量化方法,现在则更多地作为一种聚类分析方法流行于数据挖掘领域.k-means的目的是:把样本划分到k个聚类中,使得每个点都属 ...

  10. 一个故意消耗内存的java程序MemoryEater

    公司提供的测试服务器是vmware的,号称给我6G, 物理内存事实上是按需分配的. 等到真正拿到6G物理内存,黄花菜都凉了. 看到下面的文章,觉得故意用java程序侵占6G内存, 然后把侵占到内存的释 ...