From 0ed7c371f7ff103e19b2474e8a55c02d77e3c74d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 16 Oct 2021 23:48:25 +0900 Subject: CSS 基本ユーザーインターフェイスの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/15 時点の英語版に同期 --- files/ja/web/css/appearance/index.md | 2871 ++++------------------------------ 1 file changed, 261 insertions(+), 2610 deletions(-) (limited to 'files/ja/web/css/appearance') diff --git a/files/ja/web/css/appearance/index.md b/files/ja/web/css/appearance/index.md index c3a4b35afa..3bac4a5fc6 100644 --- a/files/ja/web/css/appearance/index.md +++ b/files/ja/web/css/appearance/index.md @@ -1,5 +1,5 @@ --- -title: 'appearance (-moz-appearance, -webkit-appearance)' +title: appearance (-moz-appearance, -webkit-appearance) slug: Web/CSS/appearance tags: - '-moz-appearance' @@ -9,41 +9,39 @@ tags: - CSS 基本ユーザーインターフェイス - Reference - appearance + - recipe:css-property +browser-compat: css.properties.appearance translation_of: Web/CSS/appearance --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

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

+**`appearance`** は CSS のプロパティで、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために使用されます。**`-moz-appearance`** および **`-webkit-appearance`** はこのプロパティの標準外のバージョンで、(それぞれ) Gecko (Firefox) と Webkit ベース (Safari など) や Blink ベース (Chrome、Opera など) のブラウザーで同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から **`-webkit-appearance`** に対応しています。 -

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

+{{EmbedInteractiveExample("pages/css/appearance.html")}} -
{{EmbedInteractiveExample("pages/css/appearance.html")}}
+**`-moz-appearance`** プロパティは [XUL](/ja/docs/Mozilla/Tech/XUL/Tutorial) スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されていました。また、 Mozilla プラットフォームに搭載するウィジェットの [XBL](/ja/docs/XBL) 実装でも使用されていました。Gecko/Firefox 80 以降では、これらの使い方は **`-moz-default-appearance`** に変更され、内部スタイルシートの外では使用するべきではなくなりました。 - +> **Note:** ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。 -

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

+## 構文 -
-

互換性メモ: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 none キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。

-
- -

構文

- -
/* CSS 基本ユーザーインターフェイス Level 4 の値 */
+```css
+/* CSS 基本ユーザーインターフェイス Level 4 の値 */
 appearance: none;
 appearance: auto;
-appearance: button;
+appearance: menulist-button;
 appearance: textfield;
+
+/* "Compat-auto" の値は 'auto' と同じ効果 */
+appearance: button;
 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;
@@ -55,2617 +53,270 @@ appearance: progress-bar;
 /* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
 -webkit-appearance: media-mute-button;
 -webkit-appearance: caret;
-
-

-moz-appearance プロパティは、以下の一覧から一つの値を選択して指定することができます。

+/* グローバル値 */ +appearance: inherit; +appearance: initial; +appearance: revert; +appearance: unset; +``` -

値

+### 値 -

<appearance> は以下のキーワードのうちの一つです。

+#### 標準キーワード - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値デモブラウザー説明
none - - {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge特別なスタイルは適用されません。これが既定です。
auto {{Experimental_Inline}} - - {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}なしユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では none として動作します。
attachment {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}Safari
borderless-attachment {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}Safari
button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がボタンのように描画されます。
button-arrow-down {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-next {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-previous {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-up {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-bevel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
button-focus {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
caps-lock-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}Safari Edge
caret {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
checkbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Firefox要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox
checkmenuitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox
color-well {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}Safariinput type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}Safari
default-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}Safari Edge
discrete-capacity-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}Safari
dualbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
groupbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
inner-spin-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}Firefox Chrome Safari
image-controls-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}Safari
list-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}Safaridatalist
listbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
listitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
media-enter-fullscreen-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-exit-fullscreen-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-fullscreen-volume-slider {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}Safari
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}Safari
media-mute-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-play-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-overlay-play-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}Chrome Safari
media-return-to-realtime-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}Safari
media-rewind-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}Safari
media-seek-back-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}Safari Edge
media-seek-forward-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}Safari Edge
media-toggle-closed-captions-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}Chrome Safari
media-slider {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}Chrome Safari Edge
media-sliderthumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}Chrome Safari Edge
media-volume-slider-container {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}Chrome Safari
media-volume-slider-mute-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}Safari
media-volume-slider {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}Chrome Safari
media-volume-sliderthumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}Chrome Safari
media-controls-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-dark-bar-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}Safari
media-controls-fullscreen-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-light-bar-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}Safari
media-current-time-display {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}Chrome Safari
media-time-remaining-display {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}Chrome Safari
menuarrow {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menubar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menucheckbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuimage {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menulist {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-textfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)
menupopup {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuradio {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuseparator {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
meter - - {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
meterbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxFirefox 16 の新機能。代わりに meter を使用のこと
meterchunk {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxFirefox 16 で追加。 Firefox 64 で削除。
number-input {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}Firefox
progress-bar - - {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
progress-bar-value {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}Chrome Safari
progressbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}Firefox要素が進捗バーのようにスタイル付けられます。代わりに progress-bar を使用のこと
progressbar-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox
progresschunk {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
progresschunk-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
push-button {{Non-standard_Inline}} - - {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}Chrome Safari Edge
radio {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Firefox要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
radiomenuitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
range {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox
range-thumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox
rating-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}Safari
resizer {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
resizerpanel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scale-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbend {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox
scalethumb-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbstart {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox
scalethumbtick {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox
scalethumb-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox
scale-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-down {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-left {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-right {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-up {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarthumb-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox
scrollbartrack-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbartrack-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox
searchfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
searchfield-decoration {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-decoration {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}Safari Edge
searchfield-cancel-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}Chrome Safari Edge
snapshotted-plugin-overlay {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}Safari
separator {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
sheet {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}None
slider-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
slider-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
spinner {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-downbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-textfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-upbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
splitter {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
square-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}Chrome Safari Edge
statusbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
statusbarpanel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanels {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-back {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-forward {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
textarea - - {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield-multiline {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}Firefox代わりに textarea を使用のこと
toolbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton-dropdown {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbargripper {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tooltip {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheader {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadercell {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadersortarrow {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeline {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwisty {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwistyopen {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeview {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
relevancy-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}Safari
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} - - {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。
-moz-win-communicationstext {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-win-communications-toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} - - {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。
-moz-win-media-toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-box-maximized {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-close {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-maximize {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-minimize {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-restore {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-bottom {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-left {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-right {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar-maximized {{Non-standard_Inline}} -
値ブラウザー説明
noneFirefox Chrome Safari Edge特別なスタイルは適用されません。これが既定です。
autoFirefox Chrome + ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では `none` として動作します。 +
menulist-buttonFirefox Chrome Safari Edge + この要素がメニューリストを開くことができるようなボタンとしてのスタイルになります。 +
textfieldFirefox Chrome Safari Edge
+ 以下の値は auto と同等のものとして扱われます。 +
buttonFirefox Chrome Safari Edgeこの要素がボタンのように表示されます。
checkboxFirefox Chrome Safari Edge + この要素がチェックボックスのように表示されます。実際の「チェックボックス」の部分のみが含まれます。 +
listboxFirefox Chrome Safari Edge
menulistFirefox Chrome Safari Edge
meterChrome Safari Firefox
progress-barChrome Safari Firefox
push-buttonChrome Safari Edge
radioFirefox Chrome Safari Edge + この要素がラジオボタンのように表示されます。実際の「ラジオボタン」の部分のみが含まれます。 +
searchfieldFirefox Chrome Safari Edge
slider-horizontalChrome Safari Edge
square-buttonChrome Safari Edge
textareaFirefox Chrome Safari Edge
- 
-<div>Lorem</div>
- - {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} - Firefox - Firefox 64 で削除 - - - -apple-pay-button {{Non-standard_Inline}} - - - {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}} - Safari - iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1 - - - +

独自のスタイル付けの適用

-

形式文法

+#### HTML -{{CSSSyntax}} +```html +

+``` -

例

+#### CSS -

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

+```css +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + vertical-align: middle; +} -
.exampleone {
-  -moz-appearance: toolbarbutton;
+input[type="checkbox"] {
+  border: 2px solid #555;
+  width: 20px;
+  height: 20px;
+  padding: 4px;
+}
+input[type="checkbox"]:checked {
+  background: #555;
+  background-clip: content-box;
+}
+label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 -2px 8px;
 }
-
+``` -

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

+#### 結果 -

仕様書

+{{EmbedLiveSample("Apply_custom_styling", 1050, 100)}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}{{Spec2("CSS4 Basic UI")}}初回定義
+## 仕様書 -

{{CSSInfo}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.appearance")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS 3 基本ユーザーインターフェイスでの `appearance` の定義](https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance) (2004-05-11 より勧告候補)。 +- [UI 仕様 4 から削除された CSS3 機能](https://wiki.csswg.org/spec/css4-ui#dropped-css3-features) -- cgit v1.2.3-54-g00ecf