Bug笔记：-webkit-appearance:none导致无法获取checkbox值

最新推荐文章于 2021-02-21 15:56:42 发布
最新推荐文章于 2021-02-21 15:56:42 发布
阅读量5.9k 收藏
点赞数
分类专栏： 杀虫剂
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jennieji/article/details/8512426
版权

这个BUG发生的背景有点复杂。大概就是一个Form表单，要用Validation Plugin验证，Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。

最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。

-webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在这个属性下就直接隐藏掉了。然后用JS获取checkbox值时Webkit浏览器会报很奇怪的错误。给这个元素重新赋上-webkit-appearance:checkbox就不会报错了。

其他的的表单元素以及其他的情况并未测试。这个问题在Chrome和Safari中都会出现，应该是Webkit引擎的问题。

杰尼js
关注
专栏目录
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1094
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
前端学习（396）：京东制作页面5三大标签优化
歌谣的博客
01-13 509
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题
csx blog
01-19 1万+
解决网站bug时，发现一个棘手的问题：的复选框选中了没有打钩，经排查，是由于css中“-webkit-appearance: none;”导致的，改成“-webkit-appearance: checkbox”后恢复正常。查询资料：总结如下：   1.-webkit-appearance的说明：          改变按钮和其他控件的外观，使其类似于原生控件。 -webkit-appea
ios input样式无法修改的坑(-webkit-appearance: none;)
weixin_43817197的博客
06-14 1378
开发过程中遇到这样的问题,input按钮和日期控件…的样式在ios手机上无法被修改. -webkit-appearance 是改变按钮和其他控件的外观, 使其类似于原生控件. -webkit-appearance: none; 去除系统默认appearance的样式,常用于IOS下移除原生样式 坑 重现: css: <style> .demo { /* -web...
-webkit-appearance问题
ly2983068126的博客
11-02 1664
当我们写移动端样式时，会发现有些样式在苹果手机里，显示不一样。 今天我们来说说-webkit-appearance。 在不同的“-webkit-appearance”选值情况下，button所渲染的效果是不一样的，详细的测试代码大家可使用safari浏览器点击这 里。有关于“-webkit-appearance”的详细介绍，这回算是知道了，最后我建议大家，我们可以直接在“reset.css
CSS：关于“-webkit-appearance: none”样式使用问题（转）
weixin_34326429的博客
11-21 179
2019独角兽企业重金招聘Python工程师标准>>> ...
-webkit-appearance:none
gxf_ming的博客
06-13 1622
-webkit-appearance用来改变按钮和其他控件的外观,使其外观类似于原生控件. -webkit-appearance:push-button是将按钮设置成IOS中默认原生控件的样式. 当我们需要移除原生控件样式时:-webkit-appearance:none,这样就去掉了原生的样式,可以自己更改按钮的样式, 需要注意的是:ios下的按钮这样设置之后,还是有圆角的,这时需
前端学习（409）：京东制作页面17小导航栏下
歌谣的博客
01-14 283
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
前端学习（401）：京东制作页面9京东图标下载
歌谣的博客
01-14 336
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
前端学习（397）：京东制作页面6京东页面头部制作
歌谣的博客
01-13 590
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
appearance: none;的使用
zzgzzg00的专栏
10-07 8745
    在知乎上看到一个问题，为什么前端开发总喜欢用div代替语意更好的button按钮来实现button，原因无非是各个浏览器的button丑且样式不一致，所以干脆用div模拟反而要比修改button的默认样式反而更便捷。     其实一直有一个非标准的css而且兼容还出奇的好的属性--ie无视，能够在某种程度上缓解这种矛盾，就是  -webkit-appearance: none;（这里...
css3 的@supports判断
JasonAlonk的博客
12-16 890
@supports @supports可以判断当前浏览器是否支持css3的属性 支持（与 and， 或 or ，非 not） /* 判断浏览器是否支持 display:flex; */ @supports (display:flex) { /* 则干一些事情*/ .login-container .el-input input { color: red; } } ...
-webkit-appearance: none解决ios样式的的不一性
weixin_39818813的博客
05-04 3374
先上代码：下面这个按钮其实在安卓和ios平台的显示效果是不一样的解释：-webkit-appearance属性拓展改变按钮和其他控件的外观，使其类似于原生控件。-webkit-appearance 是一个      不规范的属性         （unsupported WebKit property），它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支...
css中不常见但是还能看见的一些属性
Army-海军的博客
06-05 1万+
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { .login-container .el-input input { color: $cursor; } } 源于上边这段代码。上边这段代码主要是解决光标颜色和文字颜色一致 caret-color属性可以改变输入框插入光标的颜色，同时又不改变...
CSS @supports解析
zeros
02-21 160
@supports（）会检测括号中的声明，在浏览器支持该声明的情况下执行花括号中的代码。 基本属性检测 @supports (display: flex) { div { display: flex; } } not关键字 @supports not (display: flex) { div { float: left; } } 组合条件检测 @supports (display: flex) and (-webkit-appearance: caret) { } 也可以用括号将多个条件进行
CSS：关于“-webkit-appearance: none”样式使用问题
热门推荐
LIGHT的博客
11-18 4万+
场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好.在网上搜索了一番后,发现css样式:-webkit-appearance: none,就可以去除浏览器默认样式.   ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form { margin:
-webkit-appearance:none 在input控件上的设置体现
Candy_10181的博客
05-30 7676
通常，IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。-----------------------------------------------------------------------------------------------------------------------------------下面这...
针对IOS的-webkit-appearance参数问题
夕阳沐雨的博客
03-27 591
由于我改变了checkbox的选择框，让其变成radio。选择框使用了-webkit-appearance:none;outline: none;这种清除原样式的写法，突然发现在IOS端出现了黑色的边框，为此我查了很久的资料，后来我发现只要加上border：0;就能清除这种边框。 再来说说我在查找资料的过程中总结了一下-webkit-appearance的拓展（以下信息来源于网上的摘取，如有不正...
-webkit-appearance 使用说明
默默努力的猪
03-05 1万+
前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。 大
input[type='checkbox']{ -webkit-appearance: checkbox; background-color: pink; } input[type="checkbox"]:checked { background-color: lightgreen!important; }我这样修改样式不管用怎么回事
最新发布
06-11
你的CSS样式表代码看起来没有问题，但是可能由于浏览器的默认样式或者其他CSS样式表的样式优先级比较高，导致样式修改不起作用。你可以尝试使用以下方法解决问题： 1. 添加`!important`关键字：在样式属性后面添加`!important`关键字可以强制覆盖其他样式，例如： ```css input[type='checkbox'] { -webkit-appearance: checkbox; background-color: pink !important; } ``` 2. 检查样式优先级：如果其他样式表中的样式优先级比较高，你可以使用更具体的CSS选择器或者提高样式的优先级，例如： ```css body input[type='checkbox'] { -webkit-appearance: checkbox; background-color: pink; } ``` 3. 检查浏览器兼容性：部分浏览器可能不支持某些CSS属性，你可以使用浏览器兼容性前缀或者更换其他属性，例如： ```css input[type='checkbox'] { -webkit-appearance: checkbox; -moz-appearance: checkbox; background-color: pink; } ``` 以上方法可以帮助你解决多选框样式修改不起作用的问题。如果问题仍然存在，请提供更多信息，以便我能够更好地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值