diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/css/appearance | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/css/appearance')
| -rw-r--r-- | files/ru/web/css/appearance/index.html | 2668 |
1 files changed, 2668 insertions, 0 deletions
diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html new file mode 100644 index 0000000000..af72de18ef --- /dev/null +++ b/files/ru/web/css/appearance/index.html @@ -0,0 +1,2668 @@ +--- +title: 'appearance (-moz-appearance, -webkit-appearance)' +slug: Web/CSS/appearance +tags: + - Стилизация + - кастомные свойства +translation_of: Web/CSS/appearance +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>CSS свойство <strong><code>-moz-appearance</code></strong> используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.</p> + +<p>Свойство <strong><code>-webkit-appearance</code></strong> используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают <code>-webkit-appearance</code>, для обеспечения совместимости.</p> + +<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div> + + + +<p>Это свойство часто используется в таблицах стилей <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации <a href="/en-US/docs/XBL">XBL</a> виджетов, которые поставляются с платформой Mozilla.</p> + +<div class="note"> +<p><strong>Примечание о совместимости</strong>: Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово <code>none</code> не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: 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: <code>button-bevel;</code> + +/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */ +-webkit-appearance: <code>media-mute-button</code>; +-webkit-appearance: caret; +</pre> + +<p>Свойство <code>-moz-appearance</code> может быть указано как одно значение, выбранное из списка ниже.</p> + +<h3 id="Значения">Значения</h3> + +<p><code><appearance></code> является одним из нижеследующих ключевых свойств:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Value</th> + <th>Demo</th> + <th>Browser</th> + <th>Description</th> + </tr> + <tr> + <td><code>none</code></td> + <td> + <div class="hidden" id="sampleNone"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance:none; +-webkit-appearance:none; +appearance:none; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td>No special styling is applied. This is the default.</td> + </tr> + <tr> + <td><code>auto</code> {{Experimental_Inline}}</td> + <td> + <div class="hidden" id="sampleAuto"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: auto; +-webkit-appearance: auto; +appearance:auto; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}</td> + <td>None</td> + <td>The user agent selects the appropriate special styling based on the element. Acts as <code>none</code> on elements with no special styling.</td> + </tr> + <tr> + <td><code>attachment</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleAttachment"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: attachment; +-webkit-appearance: attachment; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>borderless-attachment</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-borderless-attachment"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: borderless-attachment; +-webkit-appearance: borderless-attachment; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleButton"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: button; +-webkit-appearance: button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td>The element is drawn like a button.</td> + </tr> + <tr> + <td><code>button-arrow-down</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleButtonArrowDown"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: button-arrow-down; +-webkit-appearance: button-arrow-down; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>button-arrow-next</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleButtonArrowNext"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: button-arrow-next; +-webkit-appearance: button-arrow-next; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>button-arrow-previous</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleButtonArrowPrevious"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: button-arrow-previous; +-webkit-appearance: button-arrow-previous; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>button-arrow-up</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleButtonArrowUp"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: button-arrow-up; +-webkit-appearance: button-arrow-up; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>button-bevel</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleButtonBevel"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: button-bevel; +-webkit-appearance: button-bevel; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>button-focus</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleButtonFocus"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: button-focus; +-webkit-appearance: button-focus; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>caps-lock-indicator</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-caps-lock-indicator"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: caps-lock-indicator; +-webkit-appearance: caps-lock-indicator; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}</td> + <td>Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>caret</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleCaret"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: caret; +-webkit-appearance: caret; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>checkbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleCheckbox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: checkbox; +-webkit-appearance: checkbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td>The element is drawn like a checkbox, including only the actual "checkbox" portion.</td> + </tr> + <tr> + <td><code>checkbox-container</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleCheckboxContainer"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: checkbox-container; +-webkit-appearance: checkbox-container; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>The 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.</td> + </tr> + <tr> + <td><code>checkbox-label</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleCheckboxLabel"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: checkbox-label; +-webkit-appearance: checkbox-label; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>checkmenuitem</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleCheckmenuitem"> + <pre class="brush: css"> +div { color: black; height: 20px; +-moz-appearance: checkmenuitem; +-webkit-appearance: checkmenuitem; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>color-well</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-color-well"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: color-well; +-webkit-appearance: color-well; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td><code>input type=color</code></td> + </tr> + <tr> + <td><code>continuous-capacity-level-indicator</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-continuous-capacity-level-indicator"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: continuous-capacity-level-indicator; +-webkit-appearance: continuous-capacity-level-indicator; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>default-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-default-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: default-button; +-webkit-appearance: default-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}</td> + <td>Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>discrete-capacity-level-indicator</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-discrete-capacity-level-indicator"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: discrete-capacity-level-indicator; +-webkit-appearance: discrete-capacity-level-indicator; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>dualbutton</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleDualButton"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: dualbutton; +-webkit-appearance: dualbutton; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>groupbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleGroupbox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: groupbox; +-webkit-appearance: groupbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>inner-spin-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleInnerSpinButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: inner-spin-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>image-controls-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-image-controls-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: image-controls-button; +-webkit-appearance: image-controls-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>list-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-list-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: list-button; +-webkit-appearance: list-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td>datalist</td> + </tr> + <tr> + <td><code>listbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleListBox"> + <pre class="brush: css"> +div { color: black; height:20px; +-moz-appearance: listbox; +-webkit-appearance: listbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>listitem</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleListItem"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: listitem; +-webkit-appearance: listitem; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>media-enter-fullscreen-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaEnterFullscreenButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-enter-fullscreen-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-exit-fullscreen-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaExitFullscreenButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-exit-fullscreen-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-fullscreen-volume-slider</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-fullscreen-volume-slider"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-fullscreen-volume-slider; +-webkit-appearance: media-fullscreen-volume-slider; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-fullscreen-volume-slider-thumb</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-fullscreen-volume-slider-thumb"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-fullscreen-volume-slider-thumb; +-webkit-appearance: media-fullscreen-volume-slider-thumb; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-mute-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaMuteButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-mute-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>media-play-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaPlayButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-play-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>media-overlay-play-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaOverlayPlayButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-overlay-play-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-return-to-realtime-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-return-to-realtime-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-return-to-realtime-button; +-webkit-appearance: media-return-to-realtime-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-rewind-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-rewind-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-rewind-button; +-webkit-appearance: media-rewind-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-seek-back-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-seek-back-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-seek-back-button; +-webkit-appearance: media-seek-back-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}</td> + <td>Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>media-seek-forward-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-seek-forward-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-seek-forward-button; +-webkit-appearance: media-seek-forward-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}</td> + <td>Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>media-toggle-closed-captions-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaToggleClosedCaptionsButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-toggle-closed-captions-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-slider</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaSlider"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-slider; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>media-sliderthumb</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaSliderThumb"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-sliderthumb; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>media-volume-slider-container</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaVolumeSliderContainer"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-volume-slider-container; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-volume-slider-mute-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-volume-slider-mute-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-volume-slider-mute-button; +-webkit-appearance: media-volume-slider-mute-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-volume-slider</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaVolumeSlider"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-volume-slider; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-volume-sliderthumb</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaVolumeSliderThumb"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-volume-slider-thumb; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-controls-background</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaControlsBackground"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-controls-background; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-controls-dark-bar-background</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-controls-dark-bar-background"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-controls-dark-bar-background; +-webkit-appearance: media-controls-dark-bar-background; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-controls-fullscreen-background</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaControlsFullscreenBackground"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-controls-fullscreen-background; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-controls-light-bar-background</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-media-controls-light-bar-background"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: media-controls-light-bar-background; +-webkit-appearance: media-controls-light-bar-background; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-current-time-display</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaCurrentTimeDisplay"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-current-time-display; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>media-time-remaining-display</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMediaTimeRemainingDisplay"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: media-time-remaining-display; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>menuarrow</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuArrow"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menuarrow; +-webkit-appearance: menuarrow; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>menubar</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenubar"> + <pre class="brush: css"> +div { color: balck; +-moz-appearance: menubar; +-webkit-appearance: menubar; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>menucheckbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuCheckbox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menucheckbox; +-webkit-appearance: menucheckbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>menuimage</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuImage"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menuimage; +-webkit-appearance: menuimage; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>menuitem</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuItem"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menuitem; +-webkit-appearance: menuitem; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.</td> + </tr> + <tr> + <td><code>menuitemtext</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuItemText"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menuitemtext; +-webkit-appearance: menuitemtext; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in FF 64</td> + </tr> + <tr> + <td><code>menulist</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuList"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menulist; +-webkit-appearance: menulist; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>menulist-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuListButton"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menulist-button; +-webkit-appearance: menulist-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td>The element is styled as a button that would indicate a menulist can be opened.</td> + </tr> + <tr> + <td><code>menulist-text</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuListText"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menulist-text; +-webkit-appearance: menulist-text; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>menulist-textfield</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuListTextfield"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menulist-textfield; +-webkit-appearance: menulist-textfield; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td>The element is styled as the text field for a menulist. (Not implemented for the Windows platform)</td> + </tr> + <tr> + <td><code>menupopup</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuPopup"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menupopup; +-webkit-appearance: menupopup; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>menuradio</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuRadio"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: menuradio; +-webkit-appearance: menuradio; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>menuseparator</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMenuSeparator"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: menuseparator; +-webkit-appearance: menuseparator; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>meter</code></td> + <td> + <div class="hidden" id="sampleMeter"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: meter; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Firefox</td> + <td>New in Fx 64</td> + </tr> + <tr> + <td><code>meterbar</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMeterbar"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: meterbar; +-webkit-appearance: meterbar; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>New in Fx 16. Use <code>meter</code> instead</td> + </tr> + <tr> + <td><code>meterchunk</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleMeterchunk"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: meterchunk; +-webkit-appearance: meterchunk; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>New in Fx 16. Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>number-input</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleNumberinput"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: number-input; +-webkit-appearance: number-input; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>progress-bar</code></td> + <td> + <div class="hidden" id="sampleProgressBarWebkit"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: progress-bar; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Firefox</td> + <td>New in Fx 64</td> + </tr> + <tr> + <td><code>progress-bar-value</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleProgressBarValueWebkit"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: progress-bar-value; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari</td> + <td> </td> + </tr> + <tr> + <td><code>progressbar</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleProgressBar"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: progressbar; +-webkit-appearance: progressbar; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>The element is styled like a progress bar. Use <code>progress-bar</code> instead</td> + </tr> + <tr> + <td><code>progressbar-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleProgressBarVertical"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: progressbar-vertical; +-webkit-appearance: preogressbar-vertical; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>progresschunk</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleProgressChunk"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: progresschunk; +-webkit-appearance: progresschunk; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>progresschunk-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleProgressChunkVertical"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: progresschunk-vertical; +-webkit-appearance: progresschunk-vertical; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>push-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="samplePushButton"> + <pre class="brush: css"> +div{ color: black; -webkit-appearance: push-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>radio</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleRadio"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: radio; +-webkit-appearance: radio; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td>The element is drawn like a radio button, including only the actual "radio button" portion.</td> + </tr> + <tr> + <td><code>radio-container</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleRadioContainer"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: radio-container; +-webkit-appearance: radio-container; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.</td> + </tr> + <tr> + <td><code>radio-label</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleRadioLabel"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: radio-label; +-webkit-appearance: radio-label; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>radiomenuitem</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleRadioMenuItem"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: radiomenuitem; +-webkit-appearance: radiomenuitem; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>range</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleRange"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: range; +-webkit-appearance: range; }</pre> + range + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>range-thumb</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleRangeThumb"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: range-thumb; +-webkit-appearance: range-thumb; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>rating-level-indicator</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-rating-level-indicator"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: rating-level-indicator; +-webkit-appearance: rating-level-indicator; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>resizer</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleResizer"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: resizer; +-webkit-appearance: resizer; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 63</td> + </tr> + <tr> + <td><code>resizerpanel</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleResizerPanel"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: resizerpanel; +-webkit-appearance: resizerpanel; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 63.</td> + </tr> + <tr> + <td><code>scale-horizontal</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScaleHorizontal"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: scale-horizontal; +-webkit-appearance: scale-horizontal; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbend</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleThumbEnd"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scalethumbend; +-webkit-appearance: scalethumbend; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumb-horizontal</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScaleThumbHorizontal"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: scalethumb-horizontal; +-webkit-appearance: scalethumb-horizontal; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbstart</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScaleThumbStart"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scalethumbstart; +-webkit-appearance: scalethumbstart; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbtick</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScaleThumbTick"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scalethumbtick; +-webkit-appearance: scalethumbtick; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumb-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScaleThumbVertical"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scalethumb-vertical; +-webkit-appearance: scalethumb-vertical; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scale-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScaleVertical"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: scale-vertical; +-webkit-appearance: scale-vertical; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-down</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarButtonDown"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbarbutton-down; +-webkit-appearance: scrollbarbutton-down; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 63.</td> + </tr> + <tr> + <td><code>scrollbarbutton-left</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarButtonLeft"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbarbutton-left; +-webkit-appearance: scrollbarbutton-left; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 63.</td> + </tr> + <tr> + <td><code>scrollbarbutton-right</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarButtonRight"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbarbutton-right; +-webkit-appearance: scrollbarbutton-right; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 63.</td> + </tr> + <tr> + <td><code>scrollbarbutton-up</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarButtonUp"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbarbutton-up; +-webkit-appearance: scrollbarbutton-up; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 63.</td> + </tr> + <tr> + <td><code>scrollbarthumb-horizontal</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarThumbHorizontal"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbarthumb-horizontal; +-webkit-appearance: scrollbarthumb-horizontal; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarthumb-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarThumbVertical"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbarthumb-vertical; +-webkit-appearance: scrollbarthumb-vertical; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbartrack-horizontal</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarTrackHorizontal"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbartrack-horizontal; +-webkit-appearance: scrollbartrack-horizontal; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbartrack-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleScrollbarTrackVertical"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: scrollbartrack-vertical; +-webkit-appearance: scrollbarbartrack-vertical; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td><code>searchfield</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSearchField"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: searchfield; +-webkit-appearance: searchfield; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>searchfield-decoration</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-searchfield-decoration"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: searchfield-decoration; +-webkit-appearance: searchfield-decoration; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}</td> + <td>Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>searchfield-results-decoration</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-searchfield-results-decoration"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: searchfield-results-decoration; +-webkit-appearance: searchfield-results-decoration; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}</td> + <td>Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>searchfield-results-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-searchfield-results-button"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: searchfield-results-button; +-webkit-appearance: searchfield-results-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}</td> + <td>Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>searchfield-cancel-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSearchFieldCancelButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: searchfield-cancel-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>snapshotted-plugin-overlay</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-snapshotted-plugin-overlay"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: snapshotted-plugin-overlay; +-webkit-appearance: snapshotted-plugin-overlay; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>separator</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSeparator"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: separator; +-webkit-appearance: separator; }</pre> + + <pre class="bruh: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>sheet</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSheet"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: sheet; +-webkit-appearance: sheet; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td> + <td>None</td> + <td> </td> + </tr> + <tr> + <td><code>slider-horizontal</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSliderHorizontal"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: slider-horizontal; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>slider-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSliderVertical"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: slider-vertical; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>sliderthumb-horizontal</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSliderThumbHorizontal"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: slider-thumb-horizontal; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>sliderthumb-vertical</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSliderThumbVertical"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: slider-thumb-vertical; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>spinner</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSpinner"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: spinner; +-webkit-appearance: spinner; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>spinner-downbutton</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSpinnerDownbutton"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: spinner-downbutton; +-webkit-appearance: spinner-downbutton; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>spinner-textfield</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSpinnerTextfield"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: spinner-textfield; +-webkit-appearance: spinner-textfield; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>spinner-upbutton</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSpinnerUpbutton"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: spinner-upbutton; +-webkit-appearance: spinner-upbutton; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>splitter</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSplitter"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: splitter; +-webkit-appearance: splitter; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>square-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleSquareButton"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: square-button; +-webkit-appearance: square-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}</td> + <td>Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>statusbar</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleStatusBar"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: statusbar; +-webkit-appearance: statusbar; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>statusbarpanel</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleStatusBarPanel"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: statusbarpanel; +-webkit-appearance: statusbarpanel; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>tab</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTab"> + <pre class="brush: css"> +div { color: black; height: 20px; +-moz-appearance: tab; +-webkit-appearance: tab; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>tabpanel</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTabPanel"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: tabpanel; +-webkit-appearance: tabpanel; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>tabpanels</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTabPanels"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: tabpanels; +-webkit-appearance: tabpanels; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64</td> + </tr> + <tr> + <td><code>tab-scroll-arrow-back</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTabScrollArrowBack"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: tab-scroll-arrow-back; +-webkit-appearance: tab-scroll-arrow-back; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>tab-scroll-arrow-forward</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTabScrollArrowForward"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: tab-scroll-arrow-forward; +-webkit-appearance: tab-scroll-arrow-forward; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>textarea</code></td> + <td> + <div class="hidden" id="sampleTextArea"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: textarea; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>textfield</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTextField"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: textfield; +-webkit-appearance: textfield; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td> + <td>Firefox Chrome Safari Edge</td> + <td> </td> + </tr> + <tr> + <td><code>textfield-multiline</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTextfieldMultiline"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: textfield-multiline; +-webkit-appearance: textfield-multiline; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Use <code>textarea</code> instead</td> + </tr> + <tr> + <td><code>toolbar</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleToolbar"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: toolbar; +-webkit-appearance: toolbar; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>toolbarbutton</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleToolbarButton"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: toolbarbutton; +-webkit-appearance: toolbarbutton; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>toolbarbutton-dropdown</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleToolbarButtonDropdown"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: toolbarbutton-dropdown; +-webkit-appearance: toolbarbutton-dropdown; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>toolbargripper</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleToolbarGripper"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: toolbargripper; +-webkit-appearance: toolbargripper; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>toolbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleToolbox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: toolbox; +-webkit-appearance: toolbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>tooltip</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTooltip"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: tooltip; +-webkit-appearance: tooltip; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treeheader</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeHeader"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: treeheader; +-webkit-appearance: treeheader; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treeheadercell</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeHeaderCell"> + <pre class="brush: css"> +div { color: black; height:20px; +-moz-appearance: treeheadercell; +-webkit-appearance: treeheadercell; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treeheadersortarrow</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeHeaderSortArrow"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: treeheadersortarrow; +-webkit-appearance: treeheadersortarrow; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treeitem</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeItem"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: treeitem; +-webkit-appearance: treeitem; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treeline</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeLine"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: treeline; +-webkit-appearance: treeline; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treetwisty</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeTwisty"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: treetwisty; +-webkit-appearance: treetwisty; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treetwistyopen</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeTwistyOpen"> + <pre class="brush: css"> +div { color: transparent; +-moz-appearance: treetwistyopen; +-webkit-appearance: treetwistyopen; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>treeview</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleTreeView"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: treeview; +-webkit-appearance: treeview; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>relevancy-level-indicator</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sample-relevancy-level-indicator"> + <pre class="brush: css"> +div{ color: black; +-moz-appearance: relevancy-level-indicator; +-webkit-appearance: relevancy-level-indicator; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}</td> + <td>Safari</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-win-borderless-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}</td> + <td> + <div class="hidden" id="sampleWinBorderlessGlass"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-win-borderless-glass; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.</td> + </tr> + <tr> + <td><code>-moz-win-browsertabbar-toolbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWinBrowsertabbarToolbox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-win-browsertabbar-toolbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.</td> + </tr> + <tr> + <td><code>-moz-win-communicationstext</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWinCommunicationstext"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-win-communicationstext; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-win-communications-toolbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWinCommunicationsToolbox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-win-communications-toolbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is <code>-moz-win-communicationstext</code>.</td> + </tr> + <tr> + <td><code>-moz-win-exclude-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}</td> + <td> + <div class="hidden" id="sampleWinExcludeGlass"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-win-exclude-glass; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.</td> + </tr> + <tr> + <td><code>-moz-win-glass</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWinGlass"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-win-glass; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64. This style applies the Aero Glass effect to the element.</td> + </tr> + <tr> + <td><code>-moz-win-media-toolbox</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWinMediaToolbox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-win-media-toolbox; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is <code>-moz-win-mediatext</code>.</td> + </tr> + <tr> + <td><code>-moz-window-button-box</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowButtonBox"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-button-box; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-button-box-maximized</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowButtonBoxMaximized"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-button-box-maximized; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-button-close</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowButtonClose"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-button-close; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-button-maximize</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowButtonMaximize"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-button-maximize; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-button-minimize</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowButtonMinimize"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-button-minimize; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-button-restore</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowButtonRestore"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-button-restore; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-frame-bottom</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowFrameBottom"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-frame-bottom; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-frame-left</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowFrameLeft"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-frame-left; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-frame-right</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowFrameRight"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-frame-right; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-titlebar</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowTitlebar"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-titlebar; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-moz-window-titlebar-maximized</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleWindowTitlebarMaximized"> + <pre class="brush: css"> +div { color: black; +-moz-appearance: -moz-window-titlebar-maximized; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td> + <td>Firefox</td> + <td>Removed in Firefox 64.</td> + </tr> + <tr> + <td><code>-apple-pay-button</code> {{Non-standard_Inline}}</td> + <td> + <div class="hidden" id="sampleApplePayButton"> + <pre class="brush: css"> +div{ color: black; +-webkit-appearance: -apple-pay-button; }</pre> + + <pre class="brush: html"> +<div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}</td> + <td>Safari</td> + <td><strong>iOS and macOS only</strong>. Available on the web starting in iOS 10.1 and macOS 10.12.1</td> + </tr> + </tbody> +</table> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Примеры">Примеры</h2> + +<p>Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:</p> + +<pre class="brush: css">.exampleone { + -moz-appearance: toolbarbutton; +} +</pre> + +<p>Смотрите также <a href="http://jsfiddle.net/go392m5s/">this JSFiddle</a> в качестве примера, показывающего как вы можете использвать <code>appearance: none</code> для стилизации радио кнопок и чекбоксов.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}</td> + <td>{{Spec2("CSS4 Basic UI")}}</td> + <td>Первое определение.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("css.properties.appearance")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definition of <code>appearance</code> in CSS 3 Basic User Interface</a> (Candidate Recommendation from 2004-05-11).</li> + <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Dropped CSS3 features from the UI spec.4</a></li> +</ul> |