We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

この翻訳は不完全です。英語から この記事を翻訳 してください。

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

-moz-appearance CSS プロパティは、OS のテーマをベースにしたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、Gecko (Firefox) によって使用されます。

-webkit-appearance プロパティは、WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome、Opera など) で同じことを実現するために使用されます。 Edge もまた、互換性の理由から (-ms-appearance の代わりに) -webkit-appearance をサポートしています。

/* Gecko で使用できる値の一部 */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* WebKit/Blink で使用できる値の一部 */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

このプロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されます。

互換性の註: ウェブサイトでこのプロパティの使用を望む場合、非常に注意深くテストする必要があります。ほとんどのモダンなブラウザーではサポートされていますが、その実装は大きく異なります。古いブラウザーでは、noneキーワードであっても、異なるブラウザーのすべてのフォーム要素に同じ効果がなく、一部はまったくサポートされません。 最新のブラウザーでは、その差は小さくなっています。

初期値none (but this value is overridden in the user agent CSS)
適用対象全要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

-moz-appearance プロパティは、以下のリストから選択した単一の値として指定できます。

デモ 説明
none 特別なスタイル付けは適用されません (デフォルト)。ただし、バグ 649849 および バグ 605985 に注意してください。
button 要素がボタンのように描画されます。
button-arrow-down  
button-arrow-next  
button-arrow-previous  
button-arrow-up  
button-bevel  
button-focus  
caret  
checkbox 要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container 要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label  
checkmenuitem  
dualbutton  
groupbox  
listbox  
listitem  
menuarrow  
menubar  
menucheckbox  
menuimage  
menuitem 要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext  
menulist  
menulist-button 要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text  
menulist-textfield 要素が menulist のテキストフィールドとしてスタイル付けられます。(Windows プラットフォームでは実装していません)
menupopup  
menuradio  
menuseparator  
meterbar Firefox 16 の新機能
meterchunk Firefox 16 の新機能
progressbar 要素が進捗バーのようにスタイル付けられます。
progressbar-vertical  
progresschunk  
progresschunk-vertical  
radio 要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container 要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label  
radiomenuitem  
range  
range-thumb  
resizer  
resizerpanel  
scale-horizontal  
scalethumbend  
scalethumb-horizontal  
scalethumbstart  
scalethumbtick  
scalethumb-vertical  
scale-vertical  
scrollbarbutton-down  
scrollbarbutton-left  
scrollbarbutton-right  
scrollbarbutton-up  
scrollbarthumb-horizontal  
scrollbarthumb-vertical  
scrollbartrack-horizontal  
scrollbartrack-vertical  
searchfield  
separator  
sheet  
spinner  
spinner-downbutton  
spinner-textfield  
spinner-upbutton  
splitter  
statusbar  
statusbarpanel  
tab  
tabpanel  
tabpanels  
tab-scroll-arrow-back  
tab-scroll-arrow-forward  
textfield  
textfield-multiline  
toolbar  
toolbarbutton  
toolbarbutton-dropdown  
toolbargripper  
toolbox  
tooltip  
treeheader  
treeheadercell  
treeheadersortarrow  
treeitem  
treeline  
treetwisty  
treetwistyopen  
treeview  
-moz-mac-unified-toolbar Mac OS Xのみ。ツールバーとタイトルバーが、Mac OS X 10.4以降のアプリケーションで共通の Unified Toolbar スタイルで描画されます。
-moz-win-borderless-glass Windows Vista 以降。このスタイルは要素に Aero Glass 効果を適用しますが、ボーダーがありません。
-moz-win-browsertabbar-toolbox Windows Vista 以降。このツールボックススタイルは、ブラウザのタブバーに使用されることを想定しています。
-moz-win-communicationstext  
-moz-win-communications-toolbox Windows Vista 以降。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass Windows Vista 以降。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass Windows Vista 以降。このスタイルは要素にAero Glass効果を適用します。
-moz-win-mediatext  
-moz-win-media-toolbox Windows Vista 以降。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box  
-moz-window-button-box-maximized  
-moz-window-button-close  
-moz-window-button-maximize  
-moz-window-button-minimize  
-moz-window-button-restore  
-moz-window-frame-bottom  
-moz-window-frame-left  
-moz-window-frame-right  
-moz-window-titlebar  
-moz-window-titlebar-maximized  

形式構文

none | button | button-arrow-down | button-arrow-next | button-arrow-previous | button-arrow-up | button-bevel | button-focus | caret | checkbox | checkbox-container | checkbox-label | checkmenuitem | dualbutton | groupbox | listbox | listitem | menuarrow | menubar | menucheckbox | menuimage | menuitem | menuitemtext | menulist | menulist-button | menulist-text | menulist-textfield | menupopup | menuradio | menuseparator | meterbar | meterchunk | progressbar | progressbar-vertical | progresschunk | progresschunk-vertical | radio | radio-container | radio-label | radiomenuitem | range | range-thumb | resizer | resizerpanel | scale-horizontal | scalethumbend | scalethumb-horizontal | scalethumbstart | scalethumbtick | scalethumb-vertical | scale-vertical | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbartrack-horizontal | scrollbartrack-vertical | searchfield | separator | sheet | spinner | spinner-downbutton | spinner-textfield | spinner-upbutton | splitter | statusbar | statusbarpanel | tab | tabpanel | tabpanels | tab-scroll-arrow-back | tab-scroll-arrow-forward | textfield | textfield-multiline | toolbar | toolbarbutton | toolbarbutton-dropdown | toolbargripper | toolbox | tooltip | treeheader | treeheadercell | treeheadersortarrow | treeitem | treeline | treetwisty | treetwistyopen | treeview | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communicationstext | -moz-win-communications-toolbox | -moz-win-exclude-glass | -moz-win-glass | -moz-win-mediatext | -moz-win-media-toolbox | -moz-window-button-box | -moz-window-button-box-maximized | -moz-window-button-close | -moz-window-button-maximize | -moz-window-button-minimize | -moz-window-button-restore | -moz-window-frame-bottom | -moz-window-frame-left | -moz-window-frame-right | -moz-window-titlebar | -moz-window-titlebar-maximized

次のようにすると、要素を Firefox のツールバーボタンのように見せます:

.exampleone {
  -moz-appearance: toolbarbutton;
}

カスタムスタイリングをラジオボタンとチェックボックス適用するためのappearance:noneの使用例を示す例は、このJSFiddleも参照してください。

仕様

仕様 ステータス コメント
CSS Basic User Interface Module Level 4
appearance の定義
草案 最初の定義

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 12-webkit[2] 1.0 (1.7 or earlier)-moz[1]
54 (54)[3]
未サポート[2] 15-webkit 3.0-webkit
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) (有)-webkit (有) 11.0-webkit[2] (有) (有)

[1] 完全にはサポートしていません。

[2] デスクトップ版 IE では動作しません。 モバイル版 IE でのみ動作し、値 nonebuttontextfield のみサポートしています。MSDN のドキュメントをご覧ください。

[3] バグ 605985 もGecko 54 で修正されました。これは、-moz-appearance:none スタイリングされるとき、チェックボックスとラジオボタンはもはや置換要素ではありません (Firefox では。Firefox モバイルではない)。 これにより、Firefox デスクトップでこれらの要素のスタイルをカスタマイズする機能がさらに向上しました。 borderbackground-colorを設定することができます。

関連情報

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

タグ: 
このページの貢献者: momdo, yyss, malayaleecoder, teoli, ethertank, Piro, Marsf
最終更新者: momdo,