Външен вид - CSS-трикове

В appearanceимота се използва за показване на елемент с помощта на стайлинг платформа-роден на базата на тема на потребителите на операционната система.

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

Това започва да е без префикс, което е чудесно, защото историята на различни браузъри тук е много сложна.

В appearanceимота се използва за една от две причини:

За да приложите специфичен за платформата стил към елемент, който го няма по подразбиране
За да премахнете специфичен за платформата стил на елемент, който го има по подразбиране

Например, входовете с type=searchбраузъри в WebKit по подразбиране имат заоблени ъгли и са много строги в това, което можете да промените чрез CSS. Ако не искате този стил, можете да го премахнете с един замах с външен вид.

input(type=search) ( -webkit-appearance: none; )

Или можете да вземете вход с type = text и просто да го направите да изглежда като вход за търсене:

input(type=text) ( -webkit-appearance: searchfield; )

Стойности на WebKit

квадратче за отметка
радио
Натисни бутона
квадратно копче
бутон
бутон-скосяване
списък
listitem
менулист
бутон за меню
менулист-текст
menulist-textfield
лента за превъртане бутон нагоре
лента за превъртане бутон надолу
лента за превъртане бутон вляво
лента за превъртане бутон вдясно
превъртане-хоризонтално
scrollbartrack-вертикално
scrollbarthumb-horizontal
scrollbarthumb-вертикална
scrollbargripper-horizontal
scrollbargripper-вертикален
плъзгач-хоризонтален
плъзгач-вертикален
плъзгачпалец-хоризонтален
плъзгач-палец-вертикално
каретка
поле за търсене
търсачка-декорация
searchfield-резултати-декорация
бутон searchfield-results
бутон за търсене-отмяна
текстово поле
textarea

Стойности на Mozilla

нито един
бутон
квадратче за отметка
отметка-контейнер
отметка-малка
диалогов прозорец
списък
менюто
менулист
бутон за меню
menulist-textfield
изскачащо меню
лента на напредъка
радио
радио-контейнер
радио-малък
оразмерител
плъзгач
лента за превъртане бутон надолу
лента за превъртане бутон вляво
лента за превъртане бутон вдясно
лента за превъртане бутон нагоре
превъртане-хоризонтално
scrollbartrack-вертикално
разделител
Лента за състоянието
раздел
таб-ляв край Остарял
табани
текстово поле
текстово поле-многоредово
лента с инструменти
бутон на лентата с инструменти
кутия за инструменти
-moz-mac-unified-toolbar
-moz-win-безгранично стъкло
-moz-win-browsertabbar-toolbox
-moz-win-съобщения-инструментариум
-moz-win-стъкло
-moz-win-media-toolbox
подсказка
treeheadercell
дървоглави илиправен
Treeitem
treetwisty
treetwistyopen
дървовиден изглед
прозорец

Ресурси

Mozilla Docs за -moz-външен вид
Трент Уолтън във външния вид на Webkit
Шон Инман за деактивиране на вътрешната текстова сянка на въвеждане на текст на iPad
CSS3 Spec

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.