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

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

css中使用“-webkit-appearance: none;”去除系统默认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


目录
打赏
0
0
0
0
1
分享
相关文章
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
642 1
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
143 2
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
82 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等