checkbox不显示,试试去掉-webkit-appearance这个样式(代码片段)

Viva_nan Viva_nan     2022-11-23     508

关键词:

目前在项目中发现一个大坑,搞的我找了好久不知道因为什么,自用的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尚不明确

怎么去掉gridview中包含的checkbox的边框

额,我用CSS设置了,问题已解决。参考技术A把边checkbox的框设置一下不就行了 查看详情

winform中treeview怎么让它只显示父节点的checkbox,不显示子节点的。急急,如能解决分大大给

WINFORM中treeView怎么让它只显示父节点的checkbox,不显示(但不禁用)子节点的。急急,如能解决分大大给只是根节点的话简单,构造节点的时候设置一下就是了,如果每一个父节点都要这要的话,得遍历一下吧,凡是下面有子节... 查看详情

ztree的checkbox不显示问题解决办法

问题:在使用ztree插件时需要设置zTree的节点上是否显示checkbox/radio,但设置后不显示复选框/单选框,如下图所示设置方法:varsetting={check:{    enable:true,//true/false分别表示显示/不显示复选框或单选框    autoCheckTrigger:true,/... 查看详情

vb怎么实现treeview部分节点的checkbox显示,部分隐藏

比如,第一级目录有checkbox,第二级目录没有checkbox刚搜到一种方法,就是画图标,能不能判断别人点的是图标还是文字标签啊?参考技术A怎样点击文字(不是+/-号)即可展开(收缩)子节点将TREE的ShowToolTip属性设为false即可。2)当鼠标指... 查看详情

关于mfc中treecontrol控件中的onselchanged消息是不是有bug?

我想实现,只要treecontrol控件中的checkbox选中状态改变,就遍历出选中的选项然后我把OnSelchanged和OnSelchanging都测试了一下,结果一样。测试过程:默认全部选中,然后去掉一个勾,两个消息里都是显示全部被选中我的理解:OnSelch... 查看详情

winform控件treeview只部分节点显示checkbox

WinForm控件TreeView只部分节点显示 CheckBox 用过asp.net的应该知道,要在treeview中实现上述功能可以使用ShowCheckBox属性指定那些节点显示checkbox哪些不显示,可是winform中的treeview只提供一个ShowCheckBoxes属性,要么全部节点显示check... 查看详情

jquery控制checkbox选中状态但是不显示选中

问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选中状态。问题代码:functionchooseAllOrNot(id){varchoose=$("input[name=‘"+id+"‘]").attr(‘checked‘);if(choose==... 查看详情

c#winformcombobox列表里加入checkbox

C#WinformComboBox下拉列表里加入CheckBoxdevComponement里面有个ComoboxTree控件,可以在下拉框里添加树,树的节点可以显示checkbox,你可以试试参考技术Awindows自带的是不可能的你新建一个自定义控件的程序在里面写不过非常麻烦这玩意不... 查看详情

使用js控制checkbox不可用

请问如何使用js控制checkbox标签不可用控制所有checkbox谢谢参考技术Avarobj=document.getElementsBytag("checkbox");for(i=0;i<obj.length;i++)obj[i].disabled=true;这个是对的document.getElementsBytagcheckbox获取所有的checkbox对象然后设disabled为不可用 ... 查看详情

点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件,jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

...回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转 查看详情

easyuitreegrid怎么去掉全选的checkbox框

参考技术A默认的checkbox是有级联的么,就是点选父节点,全选所有子节点,所以你要全癣取消全选,只要获取所有的根节点,再选中、取消这些根节点就行了么,记得有个获取根节点的方法的,getRoot和getRoots吧本回答被提问者采... 查看详情

jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选

...问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个时候将选中的状态缓存起来,然后点击模态框中的关闭按钮,再次点击触发模... 查看详情

任务栏不显示怎么办任务栏不显示处理方法

...看看任务栏隐藏属性是否开启了,可能影响到最小化窗口显示,先在任务栏上右键,选择“属性”。2、进入属性窗口后,选择“任务栏”选项卡,看看其下的“自动隐藏任务栏”是否勾选了,如果勾选了,取消,如果没勾选,... 查看详情

google浏览器显示横竖几条细线怎么去掉

google浏览器显示横竖几条细线怎么去掉参考技术A在地址框输入“chrome://flags”,然后再重启浏览器。如果还是不行就重新下载最新版本的浏览器吧。本回答被提问者采纳 参考技术B显示器没有插好吧!检查下,拍显示器几下试试 查看详情

word表格分页后最上面的边框不显示怎么办

参考技术Aword表格分页后最上面的边框不显示怎么办word中表格分页后,表头在下一行中自动显示方法处理方法A:在WORD表格中选中表头行---右键---表格属性---行---勾选“在各页顶端以标题行形式重复出现”即可。处理方法B:(1)... 查看详情

checkbox属性checked="checked"已有,但却不显示打勾的解决办法

checkbox属性checked="checked"已有,但却不显示打勾的解决办法 ####查阅其他网站 发现主要是因为Jquery的版本问题 1、attr():获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。 在jQ... 查看详情

ad中pcb里这是怎么打印出来的,只有元件和丝印

AD中PCB里打印altium中打印电路板如何隐藏/显示丝印层,见下面步骤:首先打开自己的AltiumDesigner09软件,然后打开一个PCB工程,以打开自己的PCB工程为例子。向左转|向右转向左转|向右转如图,双击左下角层那里,就可以进入层显... 查看详情

easyuitreegrid实现显示checkbox并能获取到选定值的

闲聊:   小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕。   也不知道最近是怎么了,... 查看详情