非標準
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
-moz-appearance
CSS プロパティは、OS のテーマをベースにしたプラットフォーム用のスタイル付けを使用して要素を表示するために、Gecko (Firefox) によって使用されます。
このプロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されます。
このプロパティは Web サイトで使用しないでください。非標準であるだけでなく、動作がブラウザにより異なります。キーワード none
でさえ各フォーム要素でのふるまいがブラウザ間で一致しておらず、またまったくサポートしていないブラウザもあります。
初期値 | none (but this value is overriden in the user agent CSS) |
---|---|
適用対象 | 全要素 |
継承 | 不可 |
メディア | visual |
計算値 | 指定値 |
アニメーションの可否 | 不可 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* 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;
値
<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
例
.exampleone { -moz-appearance: toolbarbutton; }
仕様
appearance
プロパティは現在、どの CSS 仕様にも存在していません。
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.0 (1.7 or earlier)-moz[1] | 未サポート | ? | 3.0-webkit |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | ? | 1.0 (1.0) | 11.0-webkit[2] | ? | ? |
[1] 完全にはサポートしていません。
[2] 値 none
、button
、textfield
のみサポートしています。MSDN のドキュメントをご覧ください。
関連情報
- CSS 3 Basic User Interface での
appearance
の定義 (2004 年 5 月 11 日より Candidate Recommendation)、ただし陳腐化 (appearance
プロパティは新しいバージョンの仕様書で削除されました)。 - UI 仕様から削除された CSS3 機能