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 ...
随机推荐
- 使用Vue-cli搭建项目与目录详解
1.介绍 vue-cli这个构建工具大大降低了webpack的使用难度,支持热重载,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK. ...
- ubuntu16.04 安装指定版本Node,升级npm到指定版本
一.安装配置Node 1.下载(64位系统) wget https://nodejs.org/download/release/v10.1.0/node-v10.1.0-linux-x64.tar.g ...
- PAT 1128 N Queens Puzzle[对角线判断]
1128 N Queens Puzzle(20 分) The "eight queens puzzle" is the problem of placing eight chess ...
- luarocks模块管理工具
1.简介 该软件包可以安装和更新lua的第三方模块. 2.下载地址 请在 http://luarocks.org/releases/ 页面选择需要的软件包. wget http://luarocks. ...
- 关于c语言struct和typedef
C++中使用: struct test{ int x, y;};就可以定义一个名为 test的结构体,但C中很可能编译通不过.C语言并不支持在struct后使用标示符定义结构体的名字,test将 ...
- BCB中换行 需要 \r\n
例如: fprintf(fp,"\n");无换行效果 fprintf(fp,"\r\n");有换行效果
- 系统管理命令之who am i
who am i 显示的是实际用户的用户名,即用户登陆的时候的用户ID.此命令相当于who -m. 用Linux的术语来解释就是:(实际用户=uid,即user id.有效用户=euid,即effec ...
- 详细解析Linux /etc/passwd文件
本文转自:http://os.51cto.com/art/201003/187533.htm 在Linux /etc/passwd文件中每个用户都有一个对应的记录行,它记录了这个用户的一些基本属性.系 ...
- vSphere Client开启虚拟机提示:出现了常规系统错误: 由于目标计算机积极拒绝,无法连接。
进入VCenter Server服务器上 进入服务管理器,查看 VMware vCenter workflow manager 是否启动,如未启动,则改为启动,问题得以解决 再次启动虚拟机,已启动!
- 2016"百度之星" - 初赛(Astar Round2A) 1006 Gym Class 拓扑排序
Gym Class Time Limit: 6000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem ...