目前在项目中发现一个大坑,搞的我找了好久不知道因为什么,自用的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. python 面向对象高级应用(三)

    目录: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__getattr__ 二次加工标准类型(包装) __ ...

  2. ScyllaDB - 基础部署

    基础环境 操作系统: CentOS 7.2: 集群节点(虚拟机):172.16.134.15 ~ 17: 基础准备 安装依赖和卸载 abrt ( abrt 和 coredump 配置冲突 ): sud ...

  3. marathon-lb-什么是服务发现?(转)

    摘要: 将容器应用部署到集群时,其服务地址,即IP和端口, 是由集群系统动态分配的.那么,当我们需要访问这个服务时,如何确定它的地址呢?这时,就需要服务发现(Service Discovery)了.本 ...

  4. 如何把PDF文件转换为JPG图片

    大家有遇到需要将PDF文件转换为JPG的情况么,文档资料里面经常会有一些图片类型的内容,有的时候我们需要获取这些图片内容,但是PDF文件又是不可编辑的,那如何把PDF文件转换为JPG图片呢,跟着小编一 ...

  5. C++中的常量定义

    本篇笔记总结自一次代码检视. 一般来说,使用C语言编程时我们都习惯在代码当中使用C当中的宏定义来定义一个数值常量: #define MY_CONST 7 在C++开发项目时,也会经常存在沿袭C当中常量 ...

  6. ubuntu16.04(liunx) 离线安装 xgboost (anaconda3,anaconda2共存)

    服务器ubuntu 系统同时安装了 anaconda3,anaconda2 ,但服务器没有连接外网,所以 想在python3 环境下安装离线安装xgboost. 主要分2步: 0:进入py3环境  ( ...

  7. 基于ORB的LinearBlend融合

    // L14//基于ORB实现线性融合#include "stdafx.h"#include <vector>#include <opencv2/core.hpp ...

  8. OpenVAS安装过程

    OpenVAS安装过程 安装过程 检查安装状况 命令行下输入opensav-check-setup,显示错误NO CA certificate file,并显示解决方法 创建证书 输入命令openva ...

  9. Ecplise项目转移到Android Studio,以及Genymotion模拟器介绍

    一.移植android项目 今天简单分享一个从ecplise开发项目转移到Android Studio的方法,之前一直在ecplise上开发android项目,但是因为google现在主打Androi ...

  10. git基本配置及使用

    目录 设置git git remote git-flow git merge 与 git rebase 参考 Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要S ...