Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSS の -moz-appearance
プロパティは、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、 Gecko (Firefox) によって使用されます。
-webkit-appearance
プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から -webkit-appearance
に対応しています。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、 Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されます。
互換性メモ: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 none
キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。
構文
/* CSS 基本ユーザーインターフェイス Level 4 の値 */
appearance: none;
appearance: auto;
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;
/* Gecko で使用できる値の一部 */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;
/* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;
-moz-appearance
プロパティは、以下の一覧から一つの値を選択して指定することができます。
値
<appearance>
は以下のキーワードのうちの一つです。
値 | デモ | ブラウザー | 説明 |
---|---|---|---|
none |
Firefox Chrome Safari Edge | 特別なスタイルは適用されません。これが既定です。 | |
auto |
なし | ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では none として動作します。 |
|
attachment |
Safari | ||
borderless-attachment |
Safari | ||
button |
Firefox Chrome Safari Edge | 要素がボタンのように描画されます。 | |
button-arrow-down |
Firefox | Firefox 64 で削除 | |
button-arrow-next |
Firefox | Firefox 64 で削除 | |
button-arrow-previous |
Firefox | Firefox 64 で削除 | |
button-arrow-up |
Firefox | Firefox 64 で削除 | |
button-bevel |
Firefox Chrome Safari Edge | ||
button-focus |
Firefox | Firefox 64 で削除 | |
caps-lock-indicator |
Safari Edge | ||
caret |
Firefox Chrome Safari Edge | ||
checkbox |
Firefox Chrome Safari Edge | 要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。 | |
checkbox-container |
Firefox | 要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。 | |
checkbox-label |
Firefox | ||
checkmenuitem |
Firefox | ||
color-well |
Safari | input type=color |
|
continuous-capacity-level-indicator |
Safari | ||
default-button |
Safari Edge | ||
discrete-capacity-level-indicator |
Safari | ||
dualbutton |
Firefox | Firefox 64 で削除 | |
groupbox |
Firefox | Firefox 64 で削除 | |
inner-spin-button |
Firefox Chrome Safari | ||
image-controls-button |
Safari | ||
list-button |
Safari | datalist | |
listbox |
Firefox Chrome Safari Edge | ||
listitem |
Firefox Chrome Safari Edge | ||
media-enter-fullscreen-button |
Chrome Safari | ||
media-exit-fullscreen-button |
Chrome Safari | ||
media-fullscreen-volume-slider |
Safari | ||
media-fullscreen-volume-slider-thumb |
Safari | ||
media-mute-button |
Chrome Safari Edge | ||
media-play-button |
Chrome Safari Edge | ||
media-overlay-play-button |
Chrome Safari | ||
media-return-to-realtime-button |
Safari | ||
media-rewind-button |
Safari | ||
media-seek-back-button |
Safari Edge | ||
media-seek-forward-button |
Safari Edge | ||
media-toggle-closed-captions-button |
Chrome Safari | ||
media-slider |
Chrome Safari Edge | ||
media-sliderthumb |
Chrome Safari Edge | ||
media-volume-slider-container |
Chrome Safari | ||
media-volume-slider-mute-button |
Safari | ||
media-volume-slider |
Chrome Safari | ||
media-volume-sliderthumb |
Chrome Safari | ||
media-controls-background |
Chrome Safari | ||
media-controls-dark-bar-background |
Safari | ||
media-controls-fullscreen-background |
Chrome Safari | ||
media-controls-light-bar-background |
Safari | ||
media-current-time-display |
Chrome Safari | ||
media-time-remaining-display |
Chrome Safari | ||
menuarrow |
Firefox | Firefox 64 で削除 | |
menubar |
Firefox | Firefox 64 で削除 | |
menucheckbox |
Firefox | Firefox 64 で削除 | |
menuimage |
Firefox | Firefox 64 で削除 | |
menuitem |
Firefox | Firefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。 | |
menuitemtext |
Firefox | Firefox 64 で削除 | |
menulist |
Firefox Chrome Safari Edge | ||
menulist-button |
Firefox Chrome Safari Edge | 要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。 | |
menulist-text |
Firefox Chrome Safari Edge | ||
menulist-textfield |
Firefox Chrome Safari Edge | 要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません) | |
menupopup |
Firefox | Firefox 64 で削除 | |
menuradio |
Firefox | Firefox 64 で削除 | |
menuseparator |
Firefox | Firefox 64 で削除 | |
meter |
Chrome Safari Firefox | Firefox 64 で追加 | |
meterbar |
Firefox | Firefox 16 の新機能。代わりに meter を使用のこと |
|
meterchunk |
Firefox | Firefox 16 で追加。 Firefox 64 で削除。 | |
number-input |
Firefox | ||
progress-bar |
Chrome Safari Firefox | Firefox 64 で追加 | |
progress-bar-value |
Chrome Safari | ||
progressbar |
Firefox | 要素が進捗バーのようにスタイル付けられます。代わりに progress-bar を使用のこと |
|
progressbar-vertical |
Firefox | ||
progresschunk |
Firefox | Firefox 64 で削除 | |
progresschunk-vertical |
Firefox | Firefox 64 で削除 | |
push-button |
Chrome Safari Edge | ||
radio |
Firefox Chrome Safari Edge | 要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。 | |
radio-container |
Firefox | 要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。 | |
radio-label |
Firefox | Firefox 64 で削除 | |
radiomenuitem |
Firefox | Firefox 64 で削除 | |
range |
Firefox | ||
range-thumb |
Firefox | ||
rating-level-indicator |
Safari | ||
resizer |
Firefox | Firefox 63 で削除 | |
resizerpanel |
Firefox | Firefox 63 で削除 | |
scale-horizontal |
Firefox | ||
scalethumbend |
Firefox | ||
scalethumb-horizontal |
Firefox | ||
scalethumbstart |
Firefox | ||
scalethumbtick |
Firefox | ||
scalethumb-vertical |
Firefox | ||
scale-vertical |
Firefox | ||
scrollbarbutton-down |
Firefox | Firefox 63 で削除 | |
scrollbarbutton-left |
Firefox | Firefox 63 で削除 | |
scrollbarbutton-right |
Firefox | Firefox 63 で削除 | |
scrollbarbutton-up |
Firefox | Firefox 63 で削除 | |
scrollbarthumb-horizontal |
Firefox | ||
scrollbarthumb-vertical |
Firefox | ||
scrollbartrack-horizontal |
Firefox | ||
scrollbartrack-vertical |
Firefox | ||
searchfield |
Firefox Chrome Safari Edge | ||
searchfield-decoration |
Safari Edge | ||
searchfield-results-decoration |
Safari Edge | ||
searchfield-results-button |
Safari Edge | ||
searchfield-cancel-button |
Chrome Safari Edge | ||
snapshotted-plugin-overlay |
Safari | ||
separator |
Firefox | Firefox 64 で削除 | |
sheet |
None | ||
slider-horizontal |
Chrome Safari Edge | ||
slider-vertical |
Chrome Safari Edge | ||
sliderthumb-horizontal |
Chrome Safari Edge | ||
sliderthumb-vertical |
Chrome Safari Edge | ||
spinner |
Firefox | Firefox 64 で削除 | |
spinner-downbutton |
Firefox | Firefox 64 で削除 | |
spinner-textfield |
Firefox | Firefox 64 で削除 | |
spinner-upbutton |
Firefox | Firefox 64 で削除 | |
splitter |
Firefox | Firefox 64 で削除 | |
square-button |
Chrome Safari Edge | ||
statusbar |
Firefox | Firefox 64 で削除 | |
statusbarpanel |
Firefox | Firefox 64 で削除 | |
tab |
Firefox | Firefox 64 で削除 | |
tabpanel |
Firefox | Firefox 64 で削除 | |
tabpanels |
Firefox | Firefox 64 で削除 | |
tab-scroll-arrow-back |
Firefox | Firefox 64 で削除 | |
tab-scroll-arrow-forward |
Firefox | Firefox 64 で削除 | |
textarea |
Firefox Chrome Safari Edge | ||
textfield |
Firefox Chrome Safari Edge | ||
textfield-multiline |
Firefox | 代わりに textarea を使用のこと |
|
toolbar |
Firefox | Firefox 64 で削除 | |
toolbarbutton |
Firefox | Firefox 64 で削除 | |
toolbarbutton-dropdown |
Firefox | Firefox 64 で削除 | |
toolbargripper |
Firefox | Firefox 64 で削除 | |
toolbox |
Firefox | Firefox 64 で削除 | |
tooltip |
Firefox | Firefox 64 で削除 | |
treeheader |
Firefox | Firefox 64 で削除 | |
treeheadercell |
Firefox | Firefox 64 で削除 | |
treeheadersortarrow |
Firefox | Firefox 64 で削除 | |
treeitem |
Firefox | Firefox 64 で削除 | |
treeline |
Firefox | Firefox 64 で削除 | |
treetwisty |
Firefox | Firefox 64 で削除 | |
treetwistyopen |
Firefox | Firefox 64 で削除 | |
treeview |
Firefox | Firefox 64 で削除 | |
relevancy-level-indicator |
Safari | ||
-moz-win-borderless-glass |
Firefox | Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。 | |
-moz-win-browsertabbar-toolbox |
Firefox | Firefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。 | |
-moz-win-communicationstext |
Firefox | Firefox 64 で削除 | |
-moz-win-communications-toolbox |
Firefox | Firefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。 |
|
-moz-win-exclude-glass |
Firefox | Firefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。 | |
-moz-win-glass |
Firefox | Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。 | |
-moz-win-media-toolbox |
Firefox | Firefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。 |
|
-moz-window-button-box |
Firefox | Firefox 64 で削除 | |
-moz-window-button-box-maximized |
Firefox | Firefox 64 で削除 | |
-moz-window-button-close |
Firefox | Firefox 64 で削除 | |
-moz-window-button-maximize |
Firefox | Firefox 64 で削除 | |
-moz-window-button-minimize |
Firefox | Firefox 64 で削除 | |
-moz-window-button-restore |
Firefox | Firefox 64 で削除 | |
-moz-window-frame-bottom |
Firefox | Firefox 64 で削除 | |
-moz-window-frame-left |
Firefox | Firefox 64 で削除 | |
-moz-window-frame-right |
Firefox | Firefox 64 で削除 | |
-moz-window-titlebar |
Firefox | Firefox 64 で削除 | |
-moz-window-titlebar-maximized |
Firefox | Firefox 64 で削除 | |
-apple-pay-button |
Safari | iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1 |
形式文法
none | auto | textfield | menulist-button | <compat-auto>ここで
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button
例
次のようにすると、要素を Firefox のツールバーボタンのように見せます。
.exampleone {
-moz-appearance: toolbarbutton;
}
カスタムスタイリングをラジオボタンとチェックボックス適用するための appearance:none
の使用例を示す例は、このJSFiddleも参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Basic User Interface Module Level 4 appearance の定義 |
草案 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS 3 Basic User Interface での
appearance
の定義 (2004-05-11より Candidate Recommendation)。 - UI 仕様 4 から削除された CSS3 機能