外观 | CSS-Tricks

appearance 属性用于根据用户的操作系统主题使用平台原生样式显示元素。

.thing {
   -webkit-appearance: value;
   -moz-appearance:    value;
   appearance:         value;
}

这开始取消前缀，这很好，因为这里的跨浏览器故事非常复杂。

appearance 属性用于以下两种原因之一

对默认情况下没有平台特定样式的元素应用平台特定样式
从默认情况下具有平台特定样式的元素中删除平台特定样式

例如，在 WebKit 浏览器中，具有 type=search 的输入默认情况下具有圆角，并且对您可以通过 CSS 更改的内容非常严格。如果您不想要这种样式，可以使用 appearance 在一次操作中将其删除。

input[type=search] {
  -webkit-appearance: none;
}

或者，您可以使用类型为文本的输入，并使其看起来像一个搜索输入

input[type=text] {
  -webkit-appearance: searchfield;
}

WebKit 值

复选框
单选按钮
按钮
方框按钮
按钮
斜面按钮
列表框
列表项
菜单列表
菜单列表按钮
菜单列表文本
菜单列表文本框
滚动条按钮向上
滚动条按钮向下
滚动条按钮向左
滚动条按钮向右
水平滚动条轨道
垂直滚动条轨道
水平滚动条滑块
垂直滚动条滑块
水平滚动条抓手
垂直滚动条抓手
水平滑块
垂直滑块
水平滑块滑块
垂直滑块滑块
插入符号
搜索框
搜索框装饰
搜索框结果装饰
搜索框结果按钮
搜索框取消按钮
文本框
文本区域

Mozilla 值

无
按钮
复选框
复选框容器
小复选框
对话框
列表框
菜单项
菜单列表
菜单列表按钮
菜单列表文本框
弹出式菜单
进度条
单选按钮
单选按钮容器
小型单选按钮
调整大小器
滚动条
滚动条按钮向下
滚动条按钮向左
滚动条按钮向右
滚动条按钮向上
水平滚动条轨道
垂直滚动条轨道
分隔符
状态栏
标签
标签左边缘已过时
标签面板
文本框
多行文本框
工具栏
工具栏按钮
工具箱
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
工具提示
树头单元格
树头排序箭头
树项
树形展开
树形展开打开
树视图
窗口

资源

浏览器支持

这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
83*	80	否	83*	15.4

移动设备/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	15.4

Andy

# 2012 年 5 月 18 日

IE 的回退是什么？没有吗？我试图避免在选择项上使用 jQuery 并使用 appearance none 和背景图片。

信息量很大。

min

评论永久链接# 2014 年 11 月 11 日

我可以使用“appearence”...ie9？无需插件？

# 2012 年 5 月 24 日

Firefox 对此属性的支持已损坏。-moz-appearance: none 应该会删除 select 元素的下拉箭头，但它没有。

https://bugzilla.mozilla.org/show_bug.cgi?id=649849

给这个 bug 投票。我不得不使用 hack 来解决这个问题。现在是哪一年？2012 年还是 1992 年？

Lenny

# 2012 年 12 月 19 日

看起来 appearance 属性已从规范中删除1。

某种形式的“appearance:none”可能值得作为 CSS4-UI 功能进行探索。

在引入和开发 ‘appearance’ 属性时，似乎 HTML 中有限的特定 UI 元素不会被扩展，因此我们尝试通过 CSS 以有限的方式实现这一点。

由于 HTML5 中添加了新的输入元素等，并且显然有机会根据实际需要添加更多元素，因此现在更有意义的是首先在 HTML5 中追求新的特定 UI 元素，然后随后设计任何相关的 CSS 功能。

Geffentisch

# 2013 年 5 月 8 日

最好每天至少排便一次。这样，你就不会携带过多的重量，这使你能够比那些没有排便的人更快地从危险中逃脱。

你也可以节省燃油。如果你的汽车不需要加速废物，它就会使用更少的燃料。

Craig Reville

# 2013 年 8 月 6 日

我希望关于回退应该使用什么有更新。

目前，我正在考虑，因为我正在构建一个自定义系统，并且没有 IE 支持，所以我可以在 div 中完成此操作，完全违背此表单提问系统的工作方式，或者我必须创建一个替换脚本，用 div 替换 IE 中的输入字段。

我讨厌 IE，我不明白为什么有人会在他们缺乏全面的支持的情况下仍然使用它。

Nando Vieira

评论永久链接# 2013 年 8 月 14 日

除了 IE10+ 可以设置下拉菜单的样式，而 Firefox 却不行。Firefox 是新的 IE。
Peter

评论永久链接# 2015 年 2 月 24 日

我会强制将 IE 用户重定向到 chrome/safari 下载页面。

Joao Cunha

# 2013 年 8 月 19 日

嗨，伙计们！我刚想出**如何从 Firefox 中删除选择箭头**。诀窍是使用 -prefix-appearance、text-indent 和 text-overflow 的混合。

示例：http://jsfiddle.net/4WVZW/

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

John Cheesman

评论永久链接# 2013 年 8 月 22 日

谢谢！
Bernardo Mínguez

评论永久链接# 2013 年 10 月 16 日

非常感谢！简单的解决方案，效果很好！
Jeremy Daley

评论永久链接# 2014 年 4 月 15 日

对于选择器，我使用“ -moz-appearance: window ”
Luis Braschi

评论永久链接# 2014 年 7 月 13 日

提醒一下，它在 Firefox 29+ 中不起作用。

João Cunha

# 2013 年 8 月 21 日

顺便说一句，我刚刚创建了一个 gist 来解释它的细节（并跟踪解决方案的改进）：https://gist.github.com/joaocunha/6273016

Preston Badeer

评论永久链接# 2014 年 1 月 31 日

@ChrisCoyier 你应该把这个加到文章里，它太棒了！
Kirill

评论永久链接# 2014 年 6 月 18 日

它不起作用，有人有其他解决方案吗？
jul

评论永久链接# 2014 年 12 月 24 日

是的，它不起作用。
使用 Firefox 34.0.5，在 codepen 中打开示例，箭头仍然存在。

由于我正在使用背景图片来显示不同的箭头，我现在正在使用这种针对 Firefox 的方法（感谢 nathansmith）
https://gist.github.com/joaocunha/6273016/#comment-944635
来移除我的自定义背景图片，只留下默认箭头。有效，而且看起来没有损坏 = 兼容 :)

Murat KARTAL

# 2014 年 1 月 8 日

嗨，问好

如何在 Internet Explorer 上隐藏 appearance 属性？

你能帮忙吗？

谢谢。

aptkf

# 2014 年 1 月 14 日

你可能需要在这里添加一些更新。正如 Lenny 之前提到的，appearance 没有规范。因此，跨浏览器的行为不一致。

根据 MDN:

不要在网站上使用此属性：它不仅是非标准的，而且其行为在不同的浏览器之间也不同。即使是 none 关键字在不同的浏览器上对每个表单元素的行为也不同，有些浏览器根本不支持它。

这导致了一些开发工具，例如 autoprefixer，不再支持它。

MaxArt

评论永久链接# 2014 年 8 月 4 日

很遗憾，这个属性没有得到广泛支持。至少 none 值应该得到很好的支持，这实际上将是开发人员关心的唯一属性。

但令人惊讶的是，Mozilla 本身在 none 上表现很糟糕，因此它不起作用，例如在 select 元素上。

我认为这个属性应该被简化很多，只允许 none、auto 以及可能但并非必须是受限的元素范围，例如 input、radio、checkbox 和 select。其他所有内容都应该被删除。
也许这会解决一些供应商差异。

Mike Read

# 2014 年 2 月 11 日

需要注意的是，目前在 iPhone 5S 的 iOS7 中（不能说其他版本/设备）， -webkit-appearance: none; 不会删除提交按钮上的圆角，需要与 border-radius: 0; 组合使用。

Brian

# 2015 年 1 月 19 日

提供的解决方案对我来说都不起作用，还有其他人知道如何在 Android 上的 Firefox 中隐藏选择箭头吗？

Bob

# 2015 年 4 月 2 日

在 iPad 3 上使用 iOS 8 的 Safari 中它不起作用。

Nathan

# 2015 年 5 月 3 日

嘿 Chris，只想告诉你，你上面有一个链接到 https://css-tricks.org.cn/7261-webkit-html5-search-inputs/，你在谈论 Safari 搜索输入，这是一个 404 错误。随意删除此评论，我只是觉得这是最容易告诉你的方法。

Doug

# 2015 年 10 月 30 日

Joao Cunha 的链接很棒，他还为 Internet Explorer 添加了一个修复程序。最 current 的答案

select {
-webkit-appearance: none;
-moz-appearance: none;
}

select::-ms-expand {
display: none;
}

Michael

评论永久链接# 2015 年 12 月 3 日

太棒了！这正是我缺少的那块拼图！
Noor

评论永久链接# 2017 年 3 月 12 日

效果很好。谢谢！
Khánh

评论永久链接# 2018 年 2 月 9 日

很棒，非常感谢你！
lucifer164

评论永久链接# 2018 年 11 月 27 日

对我来说有效 ^^。非常感谢你 :D

Anwar

# 2016 年 6 月 20 日

大家对

form {
  * {
     appearance: none;
  }
}

另外，我很高兴看到 CSS Tricks 越来越频繁地出现在 Google/DuckDuckGo 搜索结果的榜首。

我搜索 “appearance none” 时偶然发现了这个页面。

FTW

Arnout

# 2017 年 2 月 24 日

默认的 appearance 在 IE Edge (v12+) 中受支持。

Mottie

# 2017 年 12 月 24 日

请更新列表。没有参考

-moz-appearance: checkbox-small;
-moz-appearance: dialog;
-moz-appearance: radio-small;
-moz-appearance: scrollbar;
-moz-appearance: tab-left-edge 已弃用;
-moz-appearance: window;

还有很多缺少的属性。我在这里列出太多。请参阅官方 MDN 文档

郭云河

# 2019 年 10 月 3 日

Opera 现在支持它。 https://caniuse.cn/#feat=css-appearance

Roger

# 2020 年 11 月 1 日

有人知道如何删除搜索栏上的小十字按钮吗？它似乎是由 Chrome 生成的。

Chrome 86.0.4240.111
macOS 10.14

WebKit 值

Mozilla 值

资源

浏览器支持

桌面

移动设备/平板电脑

评论

发表评论 取消回复

发表评论取消回复