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

最新推荐文章于 2021-02-21 15:56:42 发布
原创 最新推荐文章于 2021-02-21 15:56:42 发布 · 6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了一个复杂的WebKit浏览器BUG，该BUG导致在使用ValidationPlugin验证并提交Form表单时，无论采取何种措施都无法阻止页面刷新。问题最终定位在了checkbox上的-webkit-appearance:none属性，此属性使得Webkit浏览器中的checkbox被隐藏，并在JavaScript操作时引发错误。

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

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

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

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

前端学习（396）：京东制作页面5三大标签优化
歌谣的博客
01-13 700
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
前端学习（409）：京东制作页面17小导航栏下
歌谣的博客
01-14 426
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
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 1482
开发过程中遇到这样的问题,input按钮和日期控件…的样式在ios手机上无法被修改. -webkit-appearance 是改变按钮和其他控件的外观, 使其类似于原生控件. -webkit-appearance: none; 去除系统默认appearance的样式,常用于IOS下移除原生样式 坑 重现: css: <style> .demo { /* -web...
-webkit-appearance问题
ly2983068126的博客
11-02 1765
当我们写移动端样式时，会发现有些样式在苹果手机里，显示不一样。 今天我们来说说-webkit-appearance。 在不同的“-webkit-appearance”选值情况下，button所渲染的效果是不一样的，详细的测试代码大家可使用safari浏览器点击这 里。有关于“-webkit-appearance”的详细介绍，这回算是知道了，最后我建议大家，我们可以直接在“reset.css
CSS：关于“-webkit-appearance: none”样式使用问题（转）
weixin_34326429的博客
11-21 230
2019独角兽企业重金招聘Python工程师标准>>> ...
-webkit-appearance:none
gxf_ming的博客
06-13 1815
-webkit-appearance用来改变按钮和其他控件的外观,使其外观类似于原生控件. -webkit-appearance:push-button是将按钮设置成IOS中默认原生控件的样式. 当我们需要移除原生控件样式时:-webkit-appearance:none,这样就去掉了原生的样式,可以自己更改按钮的样式, 需要注意的是:ios下的按钮这样设置之后,还是有圆角的,这时需
前端学习（401）：京东制作页面9京东图标下载
歌谣的博客
01-14 476
<!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 719
<!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-...
前端学习（398）：京东制作页面7京东项目快速导航栏1
歌谣的博客
01-13 591
<!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-...
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:
appearance: none;的使用
zzgzzg00的专栏
10-07 9015
    在知乎上看到一个问题，为什么前端开发总喜欢用div代替语意更好的button按钮来实现button，原因无非是各个浏览器的button丑且样式不一致，所以干脆用div模拟反而要比修改button的默认样式反而更便捷。     其实一直有一个非标准的css而且兼容还出奇的好的属性--ie无视，能够在某种程度上缓解这种矛盾，就是  -webkit-appearance: none;（这里...
css3 的@supports判断
JasonAlonk的博客
12-16 976
@supports @supports可以判断当前浏览器是否支持css3的属性 支持（与 and， 或 or ，非 not） /* 判断浏览器是否支持 display:flex; */ @supports (display:flex) { /* 则干一些事情*/ .login-container .el-input input { color: red; } } ...
css中不常见但是还能看见的一些属性
Army-海军的博客
06-05 1万+
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { .login-container .el-input input { color: $cursor; } } 源于上边这段代码。上边这段代码主要是解决光标颜色和文字颜色一致 caret-color属性可以改变输入框插入光标的颜色，同时又不改变...
-webkit-appearance: none解决ios样式的的不一性
weixin_39818813的博客
05-04 3559
先上代码：下面这个按钮其实在安卓和ios平台的显示效果是不一样的解释：-webkit-appearance属性拓展改变按钮和其他控件的外观，使其类似于原生控件。-webkit-appearance 是一个      不规范的属性         （unsupported WebKit property），它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支...
CSS @supports解析
zeros
02-21 230
@supports（）会检测括号中的声明，在浏览器支持该声明的情况下执行花括号中的代码。 基本属性检测 @supports (display: flex) { div { display: flex; } } not关键字 @supports not (display: flex) { div { float: left; } } 组合条件检测 @supports (display: flex) and (-webkit-appearance: caret) { } 也可以用括号将多个条件进行
webkit引擎的浏览器取消默认样式：-webkit-appearance:none
寒风问雪的专栏
12-13 1142
在写样式的时候，iphone会有一些默认样式，比如 背景竟然是比较灰，并不黑。 使用-webkit-appearance:none可去除系统默认的样式 关于-webkit的一些介绍： 转载自：http://www.playgoogle.com/post/61.html WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过
修改html复选框样式
dreamimport的博客
12-12 1618
html: <input type="checkbox" value="checkbox" name="checkbox" id="checked"> css: .con form .check input[type="checkbox"] { width: 0.3rem; height: 0.3rem; display: inline-block; ...
-webkit-appearance:none 在input控件上的设置体现
Candy_10181的博客
05-30 7763
通常，IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。-----------------------------------------------------------------------------------------------------------------------------------下面这...
-webkit-appearance: none报错
最新发布
08-28
根据用户的问题，用户希望解决“-webkit-appearance: none”报错的解决方案。从提供的引用中，我们可以总结出几个关键点： 1. 引用[1]提到：使用`-webkit-appearance: none;`可能会引发问题，例如导致复选框无法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值