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

小菜101 小菜101 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.5w累计阅读 1.6w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
原创 最新推荐文章于 2026-08-26 14:11:23 发布 1.5w 阅读 AI 写同款· GEO 优化 ›
饿了么input输入框设置type=‘number‘时，去掉后面的上下按钮 BUT在现在项目中，使用的是vue+element，通常写当前页面的样式时使用scoped，但是这样会发现上面的代码失效，此时需要使用/deep/当inputtype=‘number’时，去掉后面的上下按钮。在style里面添加此段代码即可。... 阅读详情

  解决网站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

当前文章被收录于：

CSS
8 篇文章 0 人学习
订阅专栏 查看详情
标签
#appearance #-webkit-appearance #css #inupt框样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS状态伪类：构建可访问、跨端、合规的交互基础 CSS状态伪类（如:hover、:focus、:active）是Web交互的核心机制，其本质是浏览器对用户输入意图的原生响应层，而非简单的视觉装饰。它们基于HTML语义触发，遵循指针事件与焦点管理的底层逻辑，在桌面、触屏及辅助技术环境中表现各异。正确实现不仅能提升点击信心与导航效率，更是满足WCAG 2.1‘焦点可见性’和‘状态一致性’等可访问性要求的技术前提。本文聚焦链接与按钮的状态链设计，覆盖多端适配、ARIA协同、`:focus-visible`渐进增强及`:has()`等现代组合用法，为构建鲁棒、包 阅读详情

相关推荐

CSS !important 实战指南：从禁用到精准投放

CSS层叠（Cascading）是前端样式控制的核心机制，其选择器权重、源码顺序与继承关系共同决定最终渲染效果。然而在真实工程中，Bootstrap等UI框架的权重膨胀、JavaScript框架动态注入的内联样式、以及响应式断点中的不可预测覆盖，常使常规层叠逻辑失效。此时，!important并非反模式，而是CSS规范中预设的确定性保障机制——它跳过权重比较，直接生效。结合Normalize.css的基础重置、Bootstrap工具类的契约保证，以及React/Vue场景下的样式反制需求，本文解析!impo

weixin_33778544的博客 410

-webkit-appearance:none

-webkit-appearance用来改变按钮和其他控件的外观,使其外观类似于原生控件. -webkit-appearance:push-button是将按钮设置成IOS中默认原生控件的样式. 当我们需要移除原生控件样式时:-webkit-appearance:none,这样就去掉了原生的样式,可以自己更改按钮的样式, 需要注意的是:ios下的按钮这样设置之后,还是有圆角的,这时需

gxf_ming的博客 1882

现代网页页脚的语义化与响应式实现方案

页脚不仅是页面底部的视觉元素，更是HTML语义结构、CSS布局逻辑与无障碍访问能力的综合体现。其核心原理在于通过语义化标签（如<footer>）建立文档大纲，借助CSS Grid或Flexbox实现内容自适应布局，并结合响应式单位（如clamp()）与环境变量（env()）保障多端一致性。技术价值体现在提升SEO权重、增强屏幕阅读器兼容性、降低维护成本及规避渲染陷阱；典型应用场景涵盖政府网站备案合规、电商页脚稳定展示、多语言站点动态切换等。本文聚焦生产级页脚构建，深入解析语义锚点、Grid贴底、可访问性增强

543

CSS：关于“-webkit-appearance: none”样式使用问题

场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好.在网上搜索了一番后,发现css样式:-webkit-appearance: none,就可以去除浏览器默认样式.   ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form { margin:

LIGHT的博客 4万+

HTML商城模板实战：生产级静态页面工程化指南

HTML是构建网页的基石，而商城网站模板则是电商类前端落地的关键载体。理解HTML语义化结构、响应式栅格原理与静态资源优化机制，不仅能提升Lighthouse性能评分，更能保障SEO友好性、无障碍访问与跨端兼容性。本文聚焦真实交付场景，解析如何基于纯HTML/CSS/JS实现商品卡片动效、导航吸顶、搜索交互等核心功能，并通过文件哈希、WebP压缩、srcset响应式图片等工程实践，将模板转化为可上线、可维护、可扩展的生产级静态站点。

weixin_28197941的博客 318

如何配置 OpenClaw 使用免费搜索工具：摆脱付费 API 限制

本文介绍了如何配置OpenClaw使用免费搜索工具来替代付费API。主要内容包括：1)启用内置的web_fetch工具直接获取网页内容；2)创建自定义脚本聚合免费AI资讯源；3)配置其他免费网络工具。文章详细说明了配置步骤，推荐了多个优质免费AI资讯网站，并分析了该方案的优劣势。这种配置方式完全免费且灵活，特别适合预算有限的用户，能够在不依赖付费API的情况下获取所需信息。

dongdeaiziji的专栏 9816

-webkit-appearance 使用说明

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。 大家都知道每个浏览...

csl125的博客 1万+

材料仿真软件：Quantum Espresso_（15）.声子与振动模式计算

通过上述步骤和代码示例，您应该能够使用 Quantum Espresso 进行声子与振动模式的计算。声子计算是材料科学研究中的重要工具，可以帮助我们更好地理解和设计材料的性能。希望本节内容对您有所帮助。

kkchenjj的博客 1185

checkbox不显示，试试去掉-webkit-appearance这个样式

目前在项目中发现一个大坑，搞的我找了好久不知道因为什么，自用的reset.css中加入了 -webkit-appearance:none;其他所有表单没有出现问题，但checkbox会不显示，值改为checkbox或去掉该样式之后问题解决，不知道是否为浏览器更新之后出现的bug，因为以前并没有出现过类似问题。 chrome 68.0.3440.106（正式版本） 说明：...

dingcheng9127的博客 1080

车辆网络安全ISO/SAE 21434解读（一）概述

ISO/SAE 21434 《道路车辆 网络安全工程》是SAE和ISO共同制定的一项针对道路车辆的网络安全标准，它是一个面向汽车行业全供应链（OEM及各级供应商）的车辆网络安全管理指导文件

xiaoxiabang的博客 8427

肖特基二极管选型参数，结构原理，工艺与注意问题总结

肖特基二极管（Schottky Diode）是一种特殊的二极管，也被称为肖特基势垒二极管。它是利用金属与半导体接触形成的金属-半导体结原理制成的。与传统的PN结二极管相比，肖特基二极管具有更低的正向压降、更高的开关速度、更高的反向恢复时间以及更好的温度稳定性等特点。本文对肖特基二极管的工作原理，结构特点，工艺流程，选型参数及设计注意事项进行总结。

fydar的博客 813

Chrome纯CSS视差滚动的性能陷阱与安全方案

视差滚动是一种通过景深差异营造立体感的网页动效技术，其核心原理是让不同层级元素以不同速率随滚动位移变化。在现代浏览器中，CSS 提供了 background-attachment、transform: translateZ 和 scroll-driven animations 等多种实现路径，但技术价值高度依赖渲染引擎兼容性与内存管理机制。尤其在 Chrome（v105+）中，传统方案易引发层爆炸、亚像素失真和 GPU 内存超限等性能问题，直接影响 FPS 稳定性与高 DPI 屏幕下的视觉保真度。本文聚焦

weixin_30363981的博客 526

人工智能面试总结-Python

B站：啥都会一点的研究生 公众号试读：啥都会一点的研究生 目录说说Python程序运行过程？说说Python的作用域？说说Python的数据结构？说说Python中可变与不可变类型？说说进程与线程？说说Python中的多线程？说说Python中的多进程？说说Python互斥锁与死锁？说说Lambda？说说Python的深拷贝与浅拷贝？说说Python多线程是否能用多个CPU，为什么？说说Python垃圾回收机制？说说Python里的生成器？说说迭代器与生成器的区别？说说Python 列表的 del，rem.

啥都生的博客 1万+

前端面试锦集

基本面试： 做过最满意的项目是什么？项目背景？为什么要做这件事情？最终达到什么效果？你处于什么样的角色，起到了什么方面的作用？在项目中遇到什么技术问题？具体是如何解决的？ 如果再做这个项目，你会在哪些方面进行改善？ 基础扎实： IT行业,哪些发展好的同学都是具备扎实基础知识，如果理解计算机基础会更好，因为我们面临很多非前端计算问题的。 主动思考： 被动完成任务成长会很慢的，需要有自己的想法，而不是仅仅是完成任务的。 自动学习: 前端领域知识淘汰速度很快，需要经常学习新知识。 追溯深度: 遇到问题是多研究背.

Front小思的博客 6724

AgentScope Java 2.0 最佳实践：9 个完整示例手把手带你开发 Java‑Agent

本文基于9 个完整示例，深入剖析从基础对话（BasicChatExample）、工具调用（@Tool 注解）、结构化输出（POJO Schema）、ToolGroup 自主管理、MCP 外部工具集成、Hook 生命周期监控、Spring Boot SSE 流式 Web、JsonSession 会话持久化到中断恢复的全链路实战教程。

program哲学 1654

2025华为od机试真题B卷【版本管理】JavaScript实现

在 软件版本管理中，版本号由点分割的数字组成，例如 1.2.3 和 2.8。现在，你需要编写一个函数，计算两个版本号之间的可用版本号个数。这里的可用版本号指的是所有满足 version1<x<version2的版本号x的个数。若 version1 >=version2 返回0.，

MISAYAONE的博客 254

前端Canvas像素打乱：从原理到实战实现图像抽象艺术效果

图像处理是前端开发中常见的技术需求，其核心在于对像素数据的操作。通过Canvas API的getImageData和putImageData方法，开发者可以直接读取和修改图像的像素矩阵，实现各种视觉效果。这种底层操作不仅有助于理解图形编程原理，还能提升处理用户交互和状态管理的能力。在实际应用中，像素打乱算法通过随机置换像素位置，在保持原始色彩分布的同时创造出抽象艺术图像，常用于创意设计、数据可视化混淆等场景。本文以像素打乱工具为例，结合Canvas图像数据操作和像素随机化算法，演示如何构建完整的交互式图像处

weixin_34367257的博客 339

OpenClaw 运行时错误文档：Embedded Run Agent End with Stream Error（嵌入式运行代理结束流式错误）

OpenClaw运行时错误文档：EmbeddedRunAgentEndwithStreamError（OC-ERR-009） 该错误表示LLM提供商在流式传输过程中发生服务器端异常（HTTP 500），属于可恢复的中等严重性错误。典型表现为日志中出现包含"stream_error"和500状态码的错误信息。系统会自动进行错误分类（50%为服务过载，25%网络问题等），并通过内置机制尝试解决：包括模型切换、API密钥轮换和自动重试策略。用户可采取重试请求、切换模型或简化请求内容等操作，管理

多媒体编程、网络编程、系统编程、网络安全编程、驱动编程 554

-webkit-appearance: none解决ios样式的的不一性

先上代码：下面这个按钮其实在安卓和ios平台的显示效果是不一样的解释：-webkit-appearance属性拓展改变按钮和其他控件的外观，使其类似于原生控件。-webkit-appearance 是一个      不规范的属性         （unsupported WebKit property），它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支...

weixin_39818813的博客 3602

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

webkit引擎的浏览器取消默认样式：-webkit-appearance:none

在写样式的时候，iphone会有一些默认样式，比如 背景竟然是比较灰，并不黑。 使用-webkit-appearance:none可去除系统默认的样式 关于-webkit的一些介绍： 转载自：http://www.playgoogle.com/post/61.html WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过

寒风问雪的专栏 1173

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

-webkit-appearance:none;

去除checkbox radio 默认样式-webkit-appearance:none;

jjsnc 604

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

ios input样式无法修改的坑(-webkit-appearance: none;)

开发过程中遇到这样的问题,input按钮和日期控件…的样式在ios手机上无法被修改. -webkit-appearance 是改变按钮和其他控件的外观, 使其类似于原生控件. -webkit-appearance: none; 去除系统默认appearance的样式,常用于IOS下移除原生样式 坑 重现: css: <style> .demo { /* -web...

weixin_43817197的博客 1524

-webkit-appearance: none;

今天在web群里聊天的时候，发现了这个东东，我好像不怎么认识他，于是查了下关于他的信息： 抄的例子, ----------- IOS环境下的按钮都是经过美化的，但通常我们在设计web app的时候不需要这些看上去老土的样式，所以，去除这些显得很有必要。 下面这句代码就是重置这些样式的： -webkit-appearance: none; 通常，我们在写移动端的web开发时，会...

weixin_30548917的博客 459

-webkit-appearance问题

当我们写移动端样式时，会发现有些样式在苹果手机里，显示不一样。 今天我们来说说-webkit-appearance。 在不同的“-webkit-appearance”选值情况下，button所渲染的效果是不一样的，详细的测试代码大家可使用safari浏览器点击这 里。有关于“-webkit-appearance”的详细介绍，这回算是知道了，最后我建议大家，我们可以直接在“reset.css

ly2983068126的博客 1801

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

这个BUG发生的背景有点复杂。大概就是一个Form表单，要用Validation Plugin验证，Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。 最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。 -webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在

前端乱谈 6130

appearance: none;的使用

    在知乎上看到一个问题，为什么前端开发总喜欢用div代替语意更好的button按钮来实现button，原因无非是各个浏览器的button丑且样式不一致，所以干脆用div模拟反而要比修改button的默认样式反而更便捷。     其实一直有一个非标准的css而且兼容还出奇的好的属性--ie无视，能够在某种程度上缓解这种矛盾，就是  -webkit-appearance: none;（这里...

zzgzzg00的专栏 9069
上一篇： 利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果
下一篇： js获取当地时间并且拼接时间格式的三种方式
点赞 3
评论 0
书签 书签 4
小菜101
小菜101
博客等级 码龄10年 16粉丝 92原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值