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 ...
随机推荐
- Linux下编译安装MySQL5.6
[准备工作] 所有操作需要在root用户下 本机测试案例系统信息:centos7.3 安装路径:/usr/local/mysql [安装MySQL] 先安装如下依赖包: $ yum -y instal ...
- 如何确定Hadoop中map和reduce的个数--map和reduce数量之间的关系是什么?
一般情况下,在输入源是文件的时候,一个task的map数量由splitSize来决定的,那么splitSize是由以下几个来决定的 goalSize = totalSize / mapred.map. ...
- Python自动发送邮件-smtplib和email库
''' 一.先导入smtplib模块 导入MIMEText库用来做纯文本的邮件模板 二.发邮件几个相关的参数,每个邮箱的发件服务器不一样,以163为例子百度搜索服务器是 smtp.163.com 三. ...
- 更好的利用配置文件和importlib
需求:做不同的操作时只需修改配置文件即可完成 # message/email.py from .base import Base # 子类必须实现send方法,否则抛出异常 class Email(B ...
- Bootstrap按钮组学习
简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或 ...
- c++第十八天
p105~p108: 1.迭代器与数组的不同:迭代器的索引值必须是无符号类型,数组的索引无此要求. 2.使用数组的时候编译器一般会把它转化为指针. 3.auto ia2(数组名);的结果是:获得一个指 ...
- P1270 “访问”美术馆(树形dp)
P1270 “访问”美术馆 艺术馆最多有100个展室 ------> 节点数$<=100*2<2^{8}=256$ 所以可以开一个$f[i][j]$表示到第$i$个点为止花去$j$分 ...
- P1174 打砖块
P1174 打砖块 普通分组背包:50pts 题解说的啥????(大雾) 看了半天 $s[0/1][i][j]$表示第$i$列用$j$发子弹,最后一发是1/否0打在该列上的价值 $f[0/1][i][ ...
- 初学libcurl
最近想把某网站上的些数据download下来,在网上找到了cURL,正好来边学边弄一下! 下载libcurl源代码 cURL的官网是http://curl.haxx.se/ ,直接下载源代码包来编译吧 ...
- redis优缺点
redis主要是一个内存数据库.很多时候是被作为缓存来使用.redis的优势主要体现在和其他缓存方案进行比较,redis的不足主要是和其他数据库进行比较时体现的. 优点: 读写性能优异 支持数据持久化 ...