zoukankan      html  css  js  c++  java
  • 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取值代码效果介绍ChromeSafariiOS SafariAndroid 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尚不明确
  • 相关阅读:
    (转)读《从0到1》
    做事需要愿景,产品都是人思想的投射
    sed 替换有单引号的行
    删除iptables nat 规则
    解决yum安装 openssl-devel时产生的Multilib version problems found错误(转)
    docker 私有仓库 harbor docker-compose
    kubernetes 比较好的案例-创建tomcat-mysql集群 mysql.yaml + workpress.yaml
    配虚拟ip脚本
    kubenetes 1.9 学习 pod
    解决sql和beans中名字不一致问题
  • 原文地址:https://www.cnblogs.com/vivaxiaonan/p/9626958.html
Copyright © 2011-2022 走看看