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尚不明确
checkbox不显示,试试去掉-webkit-appearance这个样式的更多相关文章
- 移动端去掉按钮button默认样式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 下拉框等需要显示上下箭头切换的CSS样式
下拉框等需要显示上下箭头切换的CSS样式 .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...
- input样式去掉苹果手机的默认样式
/*<!---->去掉苹果短的样式*/ input[type="button"], input[type="submit"], input[type ...
- 【转】listView中,checkBox的显示和隐藏
原文网址:http://www.cnblogs.com/vicma/p/3460500.html 在listView中,每个item都有一个ChexBox,当显示的时候在listView外面设置一个按 ...
- 【MVVM Dev】ComboBox嵌入CheckBox的显示问题
一.前言 在ComboBox中嵌入若干个CheckBox时,当我们勾选一些CheckBox,ComboBox会显示相应的勾选项. 例如:CheckBox项有A,B,C 那么勾选这三项,ComboB ...
- ztree的CheckBox不显示问题解决办法
问题: 在使用ztree插件时需要设置 zTree 的节点上是否显示 checkbox / radio,但设置后不显示复选框/单选框,如下图所示 设置方法: var setting = { check ...
- checkbox控制显示隐藏
显示文本框<input type = "checkbox" id="checkbox" onclick="on_hide();"/&g ...
- easyui datagrid将表头的checkbox不显示(隐藏)
<script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:&quo ...
- JQuery实现 checkbox 全选、反选,子checkbox有没选去掉全选
1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...
随机推荐
- ng-深度学习-课程笔记-6: 建立你的机器学习应用(Week1)
1 训练/验证/测试集( Train/Dev/test sets ) 构建神经网络的时候有些参数需要选择,比如层数,单元数,学习率,激活函数.这些参数可以通过在验证集上的表现好坏来进行选择. 前几年机 ...
- mysql 分组统计SQL语句
1.按照特定字段: 2.在某一日期范围内: 3.按日.按月统计: 4.动态传入数据库表名称. select <if test="dateType=="d"" ...
- JS在if中的强制类型转换
JS在if中的强制类型转换 众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是: 1.使用非严格相等进行比较,对==左边的值进行类型转换 2.在if判断时,括号内的值进行类型转换,转化为 ...
- usb_submit_urb
hub_irq() --> usb_submit_urb() usb_start_wait_urb() --> usb_submit_urb() 一旦urb被USB驱动程序正确地创建和初始 ...
- CentOS日常维护及常用脚本
[root@-.x.x xiewenming]# curl myip.ipip.net 当前 IP:42.62.x.x 来自于:中国 北京 北京 联通/电信 www.17ce.com cdn解析网站 ...
- JVM的异常处理
异常处理的两大组成要素:抛出异常和捕获异常.这两大要素共同实现程序控制流的非正常转移. 抛出异常分为:显式和隐式两种. 显式抛异常的主题是应用程序,它指的是在程序中使用 “throw” 关键字.手动 ...
- UVa 1658 海军上将(最小费用最大流)
https://vjudge.net/problem/UVA-1658 题意: 给出一个v个点e条边的有向加权图,求1~v的两条不相交(除了起点和终点外公共点)的路径,使得权和最小. 思路:把2到v- ...
- install ros-indigo-pcl-ros
CMake Warning at /opt/ros/indigo/share/catkin/cmake/catkinConfig.cmake: (find_package): Could not fi ...
- Observer(观察者)
意图: 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新. 适用性: 当一个抽象模型有两个方面, 其中一个方面依赖于另一方面.将这二者封装在独立 ...
- 经典线程同步问题(生产者&消费者)--Java实现
生产者-消费者(producer-consumer)问题是一个著名的线程同步问题.它描述的是:有一群生产者线程在生产产品,并将这些产品提供给消费者线程去消费. 为使生产者与消费者之间能够并发执行,在两 ...