CSS Webkit Appearance Input Type

The appearance property is used to display an element using a platform-native styling based on the users’ operating system’s theme.

I did my fair share of screening this website on an iPad throughout development. In many cases, the version of Mobile Safari found on the iPad leaves pages like other standards-based internet browser. Simply when I reached indigenous UI aspects like search boxes & text fields did I see an inconsistency. A pre-set styling was being applied in the means of an internal shadow to input and also a slope overlay to search/ submit buttons, which also got rounded edges.

After picking through Safari’s CSS Reference I discovered -webkit-appearance, which alters the appearance of buttons & controls to appear like a native apple UI. I included this code for remark & search kinds to preserve the fundamental design I defined in my CSS: -webkit-appearance: none;

There are many criteria for this property that you could intend to make use of and/or keep an eye out for. Also, If you merely would like to disable inner-shadows of input fields you might merely use -webkit-appearance: caret;.

This is used for either reasons:

  • To use platform specific styling to a component that does not have it by default
  • To remove platform specific styling to a component that does have it by default

As an example, inputs with a type=search in WebKit web browsers by default have actually rounded corners and are extremely strict in just what you could alter via CSS. If you don’t wish that designing, you can remove it in one dropped swoop with appearance.

The appearance property is not supported in any of the major browsers.Firefox supports an alternative, the -moz-appearance property.Safari and Chrome support an alternative, the -webkit-appearance property.

WebKit values

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

Mozilla values

none button checkbox
checkbox-container dialog listbox
menulist-button menupopup menulist
menulist-button menulist-text menulist-textfield
progressbar resizer scrollbarbutton-left
statusbar separator tab
-moz-mac-unified-toolbar -moz-win-borderless-glass tooltip
window treeview treeitem

‘CSS Webkit Appearance Input type’