MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

appearance

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

appearance CSS プロパティは、OS のテーマに基づいたプラットフォーム固有のスタイルを使用して要素を表示するかどうかを示します。

初期値auto
適用対象全要素
継承不可
メディアall
計算値As specified
Animation typediscrete
正規順序per grammar

構文

appearance: auto;
appearance: none;

<appearance> は下記のテーブルのキーワードのいづれかです。

デモ 説明
auto  

(既定)ユーザーエージェントは、ホスト OS 固有のコントロールを使用してフォームコントロールを描画します。auto で計算した場合、ユーザーエージェントは次のプロパティを尊重します:

  • all
  • bottom
  • clear
  • cursor
  • direction
  • display
  • float
  • left
  • margin
  • position
  • right
  • top
  • unicode-bidi
  • visibility 
  • z-index
none   フォームコントロールは、固有コントロールのような見栄えになりません。要素は CSS の通常のルールに従って描画されます。フォームコントロール以外の他の置換要素は影響を受けません。

形式的構文

auto | none

.exampleone {
  appearance: auto;
}

仕様

仕様 ステータス コメント
CSS Basic User Interface Module Level 4
appearance の定義
勧告改訂案 初期定義。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 52.0-webkit [1]     39  
機能 Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 52.0-webkit [1]     39   52.0-webkit [1]

[1] <meter> 要素のみに適用可能。

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama
 最終更新者: YuichiNukiyama,