From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/appearance/index.html | 1556 ++++++++++++++++++++++++++++++++ 1 file changed, 1556 insertions(+) create mode 100644 files/es/web/css/appearance/index.html (limited to 'files/es/web/css/appearance/index.html') diff --git a/files/es/web/css/appearance/index.html b/files/es/web/css/appearance/index.html new file mode 100644 index 0000000000..b9bb3a62cc --- /dev/null +++ b/files/es/web/css/appearance/index.html @@ -0,0 +1,1556 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - Apariencia CSS + - CSS Referencia(2) + - No-estándar +translation_of: Web/CSS/appearance +--- +
{{non-standard_header}}{{CSSRef}}
+ +

La propiedad CSS -moz-appearance se utiliza en Gecko (Firefox) para visualizar un elemento utilizando una plataforma nativa basada en el estilo del tema del sistema operativo.

+ +

Esta propiedad es frecuentemente utilizada en hojas de estilo XUL para diseñar widgets personalizados con un estilo apropiado a la plataforma. También se utiliza en las implementaciones XBL de los widgets que se arman en la plataforma Mozilla.

+ +
+

No utilizar esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave none no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto.

+
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Lista parcial de valores válidos en Gecko */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* Lista parcial de valores válidos en WebKit/Blink */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+
+ +

Valores

+ +

<appearance> es una de las siguientes palabras clave:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDemoDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}No special styling is applied. This is the default. Note, however, {{bug(649849)}} and {{bug(605985)}}.
button + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}The element is drawn like a button.
button-arrow-down + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} 
button-arrow-next + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} 
button-arrow-previous + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} 
button-arrow-up + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} 
button-bevel + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} 
button-focus + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} 
caret + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} 
checkbox + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}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.
checkbox-label + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} 
checkmenuitem + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} 
dualbutton + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} 
groupbox + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} 
listbox + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} 
listitem + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} 
menuarrow + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} 
menubar + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} 
menucheckbox + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} 
menuimage + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} 
menuitem + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}The element is styled as menu item, item is highlighted when hovered.
menuitemtext + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} 
menulist + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} 
menulist-button + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}The element is styled as a button that would indicate a menulist can be opened.
menulist-text + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} 
menulist-textfield + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} 
menuradio + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} 
menuseparator + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} 
meterbar + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}New in Fx 16.
meterchunk + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}New in Fx 16
progressbar + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}The element is styled like a progress bar.
progressbar-vertical + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} 
progresschunk + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} 
progresschunk-vertical + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} 
radio + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}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.
radio-label + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} 
radiomenuitem + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} 
range + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}} 
range-thumb + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}} 
resizer + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} 
resizerpanel + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} 
scale-horizontal + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} 
scalethumbend + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} 
scalethumb-horizontal + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} 
scalethumbstart + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} 
scalethumbtick + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} 
scalethumb-vertical + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} 
scale-vertical + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} 
scrollbarbutton-down + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} 
scrollbarbutton-left + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} 
scrollbarbutton-right + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} 
scrollbarbutton-up + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} 
scrollbarthumb-horizontal + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} 
scrollbarthumb-vertical + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} 
scrollbartrack-horizontal + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} 
scrollbartrack-vertical + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} 
searchfield + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} 
separator + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} 
sheet + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} 
spinner + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} 
spinner-downbutton + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} 
spinner-textfield + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} 
spinner-upbutton + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} 
splitter + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} 
statusbar + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} 
statusbarpanel + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} 
tab + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} 
tabpanel + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} 
tabpanels + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} 
tab-scroll-arrow-back + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} 
tab-scroll-arrow-forward + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} 
textfield + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} 
textfield-multiline + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} 
toolbar + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} 
toolbarbutton + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} 
toolbarbutton-dropdown + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} 
toolbargripper + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} 
toolbox + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} 
tooltip + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} 
treeheader + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} 
treeheadercell + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} 
treeheadersortarrow + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} 
treeitem + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} 
treeline + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} 
treetwisty + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} 
treetwistyopen + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} 
treeview + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} 
-moz-mac-unified-toolbar + + {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.
{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} 
-moz-win-communications-toolbox + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext + + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}} 
-moz-win-media-toolbox + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} 
-moz-window-button-box-maximized + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} 
-moz-window-button-close + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} 
-moz-window-button-maximize + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} 
-moz-window-button-minimize + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} 
-moz-window-button-restore + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} 
-moz-window-frame-bottom + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} 
-moz-window-frame-left + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} 
-moz-window-frame-right + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} 
-moz-window-titlebar + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} 
-moz-window-titlebar-maximized + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} 
+ +

Síntaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

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

Especificaciones

+ +

La propiedad appearance no se encuentra actualmente presente en ninguna nueva especificación CSS.

+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatUnknown}}3.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}11.0{{property_prefix("-webkit")}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] No está completamente soportada.

+ +

[2] Solo los valores none, button, y textfield están soportados. Ver la documentación en MSDN.

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf