Внешний вид - CSS-хитрости

appearanceСвойство используется для отображения элемента с использованием платформы родной стиль , основанный на теме доступа пользователей операционной системы.

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

Это начинает быть без префикса, и это здорово, потому что кроссбраузерная история здесь очень сложна.

appearanceСвойство используется для одной из двух причин:

Чтобы применить стиль, зависящий от платформы, к элементу, который не имеет его по умолчанию
Чтобы удалить стиль, зависящий от платформы, для элемента, у которого он есть по умолчанию

Например, входы с a type=searchв браузерах WebKit по умолчанию имеют закругленные углы и очень строгие в том, что вы можете изменить с помощью CSS. Если вам не нужен такой стиль, вы можете удалить его одним махом вместе с внешним видом.

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

Или вы можете ввести ввод с помощью type = text и просто сделать его похожим на ввод для поиска:

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

Ценности WebKit

флажок
радио
нажать кнопку
квадратная кнопка
кнопка
пуговица-скос
список
Элемент списка
менулист
кнопка-менюлист
текст-менюлист
текстовое поле меню
полоса прокруткикнопка вверх
полоса прокруткикнопка вниз
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-горизонтальный
прокрутка
горизонтальная полоса прокрутки
полоса прокрутки
слайдер-горизонтальный
слайдер вертикальный
ползунок
ползунок
каретка
поле поиска
поисковое поле-украшение
поле поиска-результаты-украшение
кнопка результатов поиска
кнопка отмены поля поиска
текстовое поле
textarea

Ценности Mozilla

никто
кнопка
флажок
флажок-контейнер
флажок-маленький
диалог
список
пункт меню
менулист
кнопка-менюлист
текстовое поле меню
всплывающее меню
индикатор
радио
радиоконтейнер
радио-маленький
изменение размера
полоса прокрутки
полоса прокруткикнопка вниз
scrollbarbutton-left
scrollbarbutton-right
полоса прокруткикнопка вверх
scrollbartrack-horizontal
scrollbartrack-vertical
разделитель
статус бар
вкладка
tab-left-edge Устарело
панели вкладок
текстовое поле
текстовое поле-многострочный
панель инструментов
панель инструментов
ящик для инструментов
-moz-mac-унифицированная-панель инструментов
-моз-беспроигрышное-стекло
-moz-win-browsertabbar-панель инструментов
-moz-win-communications-toolbox
-моз-вин-стекло
-moz-win-media-toolbox
всплывающая подсказка
treeheadercell
Treeheadersortarrow
элемент дерева
ветвистый
деревья
в виде дерева
окно

Ресурсы

Документы Mozilla для -moz-appearance
Трент Уолтон о внешнем виде Webkit
Шон Инман об отключении внутренней тени текста при вводе текста на iPad
CSS3 Spec

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.