Movatterモバイル変換

[0]ホーム
URL:

  1. Веб-технологии для разработчиков
  2. CSS: каскадные таблицы стилей
  3. Руководство по CSS
  4. Properties
  5. appearance (-moz-appearance, -webkit-appearance)

This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

appearance (-moz-appearance, -webkit-appearance)

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨март 2022 г.⁩.

* Some parts of this feature may have varying levels of support.

Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS-свойство-moz-appearance используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.

Свойство-webkit-appearance используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают-webkit-appearance, для обеспечения совместимости.

Интерактивный пример

appearance: none;
appearance: auto;
<section>  <div>    <button>button</button>  </div></section>
.background {  display: flex;  place-content: center;  place-items: center;  width: 150px;  height: 150px;  background-color: white;}

Это свойство часто используется в таблицах стилейXUL для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализацииXBL виджетов, которые поставляются с платформой Mozilla.

Примечание:Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое словоnone не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.

Синтаксис

css
/* CSS модуль базового интерфейса 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> является одним из нижеследующих ключевых свойств:

ValueBrowserDescription
noneFirefox Chrome Safari EdgeHides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.
autoFirefox Chrome Edge The user agent selects the appropriate special styling based on the element. Acts asnone on elements with no special styling.
menulist-buttonFirefox Chrome Safari Edge
textfieldFirefox Chrome Safari Edge
The following values are treated as equivalent toauto:
buttonFirefox Chrome Safari EdgeThe element used to be drawn like a button.
checkboxFirefox Chrome Safari Edge The element used to be drawn like a checkbox, including only the actual "checkbox" portion.
listboxFirefox Chrome Safari Edge
menulistFirefox Chrome Safari Edge
meterChrome Safari Firefox
progress-barChrome Safari Firefox
push-buttonChrome Safari Edge
radioFirefox Chrome Safari Edge The element used to be drawn like a radio button, including only the actual "radio button" portion.
searchfieldFirefox Chrome Safari Edge
slider-horizontalChrome Safari Edge
square-buttonChrome Safari Edge
textareaFirefox Chrome Safari Edge

Non-standard keywords

The following values may be operational on historical browser versions using-moz-appearance or-webkit-appearance prefix, but not on the standardappearance property.

ValueBrowserDescription
attachmentSafari
borderless-attachmentSafari
button-bevelFirefox Chrome Safari Edge
caps-lock-indicatorSafari Edge
caretFirefox Chrome Safari Edge
checkbox-containerFirefoxThe element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
checkbox-labelFirefox
checkmenuitemFirefox
color-wellSafariinput type=color
continuous-capacity-level-indicatorSafari
default-buttonSafari Edge
discrete-capacity-level-indicatorSafari
inner-spin-buttonFirefox Chrome Safari
image-controls-buttonSafari
list-buttonSafaridatalist
listitemFirefox Chrome Safari Edge
media-enter-fullscreen-buttonChrome Safari
media-exit-fullscreen-buttonChrome Safari
media-fullscreen-volume-sliderSafari
media-fullscreen-volume-slider-thumbSafari
media-mute-buttonChrome Safari Edge
media-play-buttonChrome Safari Edge
media-overlay-play-buttonChrome Safari
media-return-to-realtime-buttonSafari
media-rewind-buttonSafari
media-seek-back-buttonSafari Edge
media-seek-forward-buttonSafari Edge
media-toggle-closed-captions-buttonChrome Safari
media-sliderChrome Safari Edge
media-sliderthumbChrome Safari Edge
media-volume-slider-containerChrome Safari
media-volume-slider-mute-buttonSafari
media-volume-sliderChrome Safari
media-volume-sliderthumbChrome Safari
media-controls-backgroundChrome Safari
media-controls-dark-bar-backgroundSafari
media-controls-fullscreen-backgroundChrome Safari
media-controls-light-bar-backgroundSafari
media-current-time-displayChrome Safari
media-time-remaining-displayChrome Safari
menulist-textFirefox Chrome Safari Edge
menulist-textfieldFirefox Chrome Safari EdgeThe element is styled as the text field for a menulist. (Not implemented for the Windows platform)
meterbarFirefoxUsemeter instead.
number-inputFirefox
progress-bar-valueChrome Safari
progressbarFirefoxThe element is styled like a progress bar. Useprogress-bar instead
progressbar-verticalFirefox
rangeFirefox
range-thumbFirefox
rating-level-indicatorSafari
relevancy-level-indicatorSafari
scale-horizontalFirefox
scalethumbendFirefox
scalethumb-horizontalFirefox
scalethumbstartFirefox
scalethumbtickFirefox
scalethumb-verticalFirefox
scale-verticalFirefox
scrollbarthumb-horizontalFirefox
scrollbarthumb-verticalFirefox
scrollbartrack-horizontalFirefox
scrollbartrack-verticalFirefox
searchfield-decorationSafari Edge
searchfield-results-decorationChrome Safari Edge(Works on Chrome 51 on Windows 7)
searchfield-results-buttonSafari Edge
searchfield-cancel-buttonChrome Safari Edge
snapshotted-plugin-overlaySafari
sheetNone
slider-verticalChrome Safari Edge
sliderthumb-horizontalChrome Safari Edge
sliderthumb-verticalChrome Safari Edge
textfield-multilineFirefoxUsetextarea instead.
-apple-pay-buttonSafariiOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

Formal definition

Начальное значениеnone
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Формальный синтаксис

appearance =
none|
auto|
base|
base-select|
<compat-auto>|
<compat-special>|
base

<compat-auto> =
searchfield|
textarea|
checkbox|
radio|
menulist|
listbox|
meter|
progress-bar|
button

<compat-special> =
textfield|
menulist-button

Примеры

Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

css
.exampleone {  -moz-appearance: toolbarbutton;}

Смотрите такжеthis JSFiddle в качестве примера, показывающего как вы можете использоватьappearance: none для стилизации радио кнопок и чекбоксов.

Спецификации

Specification
CSS Basic User Interface Module Level 4
# appearance-switching
Начальное значениеnone
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

Совместимость с браузерами

Смотрите также

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.

[8]ページ先頭
©2009-2025 Movatter.jp