MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

appearance

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

appearance CSS属性指示是否使用基于操作系统主题的平台原生的样式显示元素。

初始值auto
适用元素all elements
是否是继承属性
适用媒体all
计算值As specified
Animation typediscrete
正规顺序per grammar

注意:浏览器目前仅支持此属性的-moz和-webkit前缀版本

句法

/* Keyword values */
appearance: auto;
appearance: none;

/* Global values */
appearance: inherit;
appearance: initial;
appearance: unset;

 

 

Values

<appearance> is one of the keywords in the table below.

Value Demo Description
auto  

默认情况下,浏览器引擎可以使用主机操作系统的本地控件进行表单控件的渲染。当自动计算时,浏览器引擎仍然需要设置下列属性:

  • all
  • bottom
  • clear
  • cursor
  • direction
  • display
  • float
  • left
  • margin
  • position
  • right
  • top
  • unicode-bidi
  • visibility 
  • z-index
none  

表单控件的样式不再被强制显示与操作系统本地控件一样 。元素的样式可以通过CSSS控制。除了表单控件以外的其他替换元素都不会受到影响。

正式语法

auto | none

例子

HTML content

<div>
  <p>With default appearance</p>
  <input />
  <input type="checkbox" />
  <input type="radio">
  <select>
    <option value="1">Option 1</option>
  </select> 
</div>

<div>
  <p>With <code>appearance: none;</code></p>
  <input class="no-appearance" />
  <input type="checkbox" class="no-appearance" />
  <input type="radio" class="no-appearance" />
  <select class="no-appearance">
    <option value="1">Option 1</option>
  </select>
</div>

CSS content

.no-appearance {
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
}

Result

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 4
appearance
Editor's Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0-webkit [1]     39  
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 52.0-webkit [1]     39   52.0-webkit [1]

[1] Applies to the <meter> element only.

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, ngsteel
 最后编辑者: xgqfrms-GitHub,