CSS appearance属性如何重置移动端控件-css教程-PHP中文网

ios safari 15.4+ 不支持 appearance: none，必须用 -webkit-appearance: none 并搭配 background-color: transparent、border: 1px solid transparent、outline: none、显式设置 padding 和 line-height 四项才生效。

css appearance属性如何重置移动端控件

为什么只写 `appearance: none` 在 iOS 上完全没用

因为 iOS Safari（尤其是 15.4+）根本不读这个标准属性，它只认 -webkit-appearance: none。你写 appearance: none 就像对 Siri 说英文，它听不懂——直接跳过，继续用原生渲染层画阴影、圆角、内边距。更麻烦的是，即使加了前缀，漏掉关键重置项，阴影、错位、失焦卡顿照样出现。

`-webkit-appearance: none` 必须搭配哪 4 个 CSS 属性

这不是“建议”，是 iOS 输入框和按钮能正常显示的硬性条件，缺一不可：

background-color: transparent —— iOS 默认浅灰背景会和残留阴影叠加，视觉上强化“浮起感”
border: 1px solid transparent —— 不能写 border: none，某些 iOS 版本会触发回退到原生渲染，阴影复现
outline: none —— 聚焦时高亮环 + 原生阴影 = 双层灰蒙蒙，误判为样式没生效
padding 和 line-height 必须显式设置 —— UA 样式里 padding 是 0.5em，移除 -webkit-appearance 后不重置，文字就贴顶贴底，看起来像有阴影

不同控件要额外处理哪些伪元素或属性

appearance 只是起点，不是终点。各控件剥离原生样式后，内部 UI 仍残留：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

input[type="number"]：Chrome 保留上下微调按钮，必须加 ::-webkit-inner-spin-button { appearance: none; } 和 ::-webkit-outer-spin-button { appearance: none; }
select：箭头消失后点击区域变窄，padding-right 至少留 2rem，否则自定义图标被截断；Firefox 甚至加了 -moz-appearance: none 仍可能残留箭头，得用 background-image 覆盖
input[type="date"]：Safari 基本无视所有 appearance 设置，降级为 type="text" + JS 日期选择器更可靠
textarea：Safari 对 appearance: none 支持不稳定，统一用 -webkit-appearance: none; resize: none; 组合