CSS Property appearance

The appearance property controls however native kind controls square measure rendered. Setting appearance: none suppresses the native designs therefore CSS will be wont to totally restyle them.

Or a minimum of, that was what the 2004 CSS3-UI Cr had in mind. sadly, this specification was ne’er enforced as designed, and that we all over up with a rather convoluted state of affairs on our hands. The property had since been born from CSS3-UI and is being re-looked at within the CSS Basic program Module Level four.

What we have a tendency to presently have could be a vendor-prefix soup. No browser supports the non-prefixed version at the instant. And each Webkit and lizard support a unique set of values for -webkit-appearance and -moz-appearance severally. In theory, you may favor to show a component exploitation platform-native styling reckoning on the in operation system’s theme, however truly, this is often not recommended the least bit.

The most common use of this property at the instant is for resetting default designs exploitation appearance: none. exploitation the other values to form your component mimic the design and feel of platform-native UIs isn’t recommended as those values, have already been born from the specification.

The newest version of look remains being worked on within the CSS Basic program Module four and also the un-prefixed version currently takes two values, none and car.

CSS Property appearance Value

  • none
  • auto
  • Webkit-specific
  • Mozilla-specific

none

No styling is applied on the component in the slightest degree. The component will be titled victimization CSS as per traditional.

auto

The user-agent can render type controls with the default forms of the host software.

Webkit-specific

checkbox | radio | push-button | square-button | button | button-bevel | listbox | listitem | menulist | menulist-button | menulist-text | menulist-textfield | scrollbarbutton-up | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbartrack-horizontal | scrollbartrack-vertical | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbargripper-horizontal | scrollbargripper-vertical | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | caret | searchfield | searchfield-decoration | searchfield-results-decoration | searchfield-results-button | searchfield-cancel-button | textfield | textarea

Mozilla-specific

none | button | checkbox | checkbox-container | checkbox-small | dialog | listbox | menuitem | menulist | menulist-button | menulist-textfield | menupopup | progressbar | radio | radio-container | radio-small | resizer | scrollbar | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbartrack-horizontal | scrollbartrack-vertical | separator | statusbar | tab | tab-left-edge Obsolete | tabpanels | textfield | textfield-multiline | toolbar | toolbarbutton | toolbox | -moz-mac-unified-toolbar | -moz-win-borderless-glass | -moz-win-browsertabbar-toolbox | -moz-win-communications-toolbox | -moz-win-glass | -moz-win-media-toolbox | tooltip | treeheadercell | treeheadersortarrow | treeitem | treetwisty | treetwistyopen | treeview | window

Desktop Browser Support

Mobile Browser Support

Leave a Reply