css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题

最新推荐文章于 2019-11-11 14:22:35 发布
原创 最新推荐文章于 2019-11-11 14:22:35 发布 · 1.5w 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#appearance #-webkit-appearance #css #inupt框样式

本文介绍了一个关于<input type="checkbox">显示异常的问题，该问题表现为复选框被选中后未正常显示勾选标记。通过调整CSS属性-webkit-appearance的值，成功解决了这个问题。文章还提供了-webkit-appearance属性的相关说明和使用注意事项。

  解决网站bug时，发现一个棘手的问题：<input type="checkbox">的复选框选中了没有打钩，经排查，是由于css中“-webkit-appearance: none;”导致的，改成“-webkit-appearance: checkbox”后恢复正常。查询资料：总结如下：

  1.-webkit-appearance的说明：

         改变按钮和其他控件的外观，使其类似于原生控件。
  • -webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
  • 此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。
2.语法：

    -webkit-appearance：none | button | button-bevel ....

     默认值：none



css当中appearance: none；border: none；outline: none；的区别
jjw_zyfx的博客
03-25 708
css当中appearance: none;border: none;outline: none;的区别
-webkit-appearance: none;
weixin_30548917的博客
03-20 437
今天在web群里聊天的时候，发现了这个东东，我好像不怎么认识他，于是查了下关于他的信息： 抄的例子, ----------- IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。 下面这句代码就是重置这些样式的： -webkit-appearance: none; 通常，我们在写移动端的web开发时，会...
-webkit-appearance:none
gxf_ming的博客
06-13 1813
-webkit-appearance用来改变按钮和其他控件的外观,使其外观类似于原生控件. -webkit-appearance:push-button是将按钮设置成IOS中默认原生控件的样式. 当我们需要移除原生控件样式时:-webkit-appearance:none,这样就去掉了原生的样式,可以自己更改按钮的样式, 需要注意的是:ios下的按钮这样设置之后,还是有圆角的,这时需
-webkit-appearance: none解决ios样式的的不一性
weixin_39818813的博客
05-04 3556
先上代码：下面这个按钮其实在安卓和ios平台的显示效果是不一样的解释：-webkit-appearance属性拓展改变按钮和其他控件的外观，使其类似于原生控件。-webkit-appearance 是一个      不规范的属性         （unsupported WebKit property），它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支...
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:
input{　　　　background:none;　　　　outline:none;　　　　appearance:none;　　　　-moz-appearance:none;　　　　-webkit-appearance:none;　　},
03-29
### 如何通过CSS移除input元素的默认样式 为了完全移除 `input` 元素的默认样式，可以利用多个 CSS 属性来覆盖浏览器自带的行为和外观设置。以下是实现这一目标的具体方法： #### 使用 `background` 移除背景颜色...
-webkit-appearance: none报错
08-28
根据引用内容，`-webkit-appearance: none` 主要用于清除浏览器默认样式（特别是移动端），但错误使用会导致控件显示异常（如复选框不显示勾选状态）。以下是解决方案： #### 1. **针对性使用而非全局设置**（引用...
background: none; border: none; color: inherit; display: inline-block; font-size: inherit; line-height: inherit; text-transform: none; text-decoration: none; transition: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
03-26
最后，-webkit-appearance:none、-moz-appearance:none和appearance:none是关键，它们移除平台特定的样式，确保按钮在不同系统上呈现一致。 用户提供的引用中有提到移动端1像素边框问题，虽然不直接相关，但说明...
VS中已经不支持 -webkit-appearance: none这个样式了吗在清除一些浏览器默认样式
最新发布
08-28
我们正在讨论的是在Visual Studio（VS）中`-webkit-appearance: none`样式是否不再支持用于清除浏览器默认样式。 首先，需要明确的是：Visual Studio是一个代码编辑器，而样式（如CSS）的实际效果是由浏览器来渲染...
Bug笔记：-webkit-appearance:none导致无法获取checkbox值
前端乱谈
01-17 6086
这个BUG发生的背景有点复杂。大概就是一个Form表单，要用Validation Plugin验证，Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。 最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。 -webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在
ios input样式无法修改的坑(-webkit-appearance: none;)
weixin_43817197的博客
06-14 1480
开发过程中遇到这样的问题,input按钮和日期控件…的样式在ios手机上无法被修改. -webkit-appearance 是改变按钮和其他控件的外观, 使其类似于原生控件. -webkit-appearance: none; 去除系统默认appearance的样式,常用于IOS下移除原生样式 坑 重现: css: <style> .demo { /* -web...
-webkit-appearance:none;
jjsnc
06-07 568
去除checkbox radio 默认样式-webkit-appearance:none;
appearance: none;的使用
qq_45723045的博客
11-11 1180
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.youkuaiyun.com/zzgzzg00/article/details/82956206 在知乎上看到一个问题，为什么前端开发总喜欢用div代替语意更好的button按钮来实现button，原因无非是各个浏览器的button丑且样式不一致，所以干脆用di...
webkit引擎的浏览器取消默认样式：-webkit-appearance:none
寒风问雪的专栏
12-13 1139
在写样式的时候，iphone会有一些默认样式，比如 背景竟然是比较灰，并不黑。 使用-webkit-appearance:none可去除系统默认的样式 关于-webkit的一些介绍： 转载自：http://www.playgoogle.com/post/61.html WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过
css：appearance:none;
aamen1109的博客
11-23 875
appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari 和 Chrome */ 在移动端，h5页面中，经常会需要使用手机自带的原生select控件，此为清除默认样式代码，在苹果和安卓手机都测过，好用
-webkit-appearance:none 在input控件上的设置体现
Candy_10181的博客
05-30 7758
通常，IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。-----------------------------------------------------------------------------------------------------------------------------------下面这...
-webkit-appearance问题
ly2983068126的博客
11-02 1763
当我们写移动端样式时，会发现有些样式在苹果手机里，显示不一样。 今天我们来说说-webkit-appearance。 在不同的“-webkit-appearance”选值情况下，button所渲染的效果是不一样的，详细的测试代码大家可使用safari浏览器点击这 里。有关于“-webkit-appearance”的详细介绍，这回算是知道了，最后我建议大家，我们可以直接在“reset.css
-webkit-appearance —— webkit外观样式属性
PHP游刃者的专栏
07-15 659
发表于 2014年12月15日 by 愚人码头 被浏览 4,166 次 -webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 最近认真看了一下文档，-webkit-appearance是用来改变按钮和其他控件的外观，使其外观类似于原生控件。 关于这个属性以前写过
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值