Зовнішній вигляд - CSS-хитрощі

appearanceВластивість використовується для відображення елемента з використанням платформи рідної стиль , заснований на темі доступу користувачів операційної системи.

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

Це починає мати без префіксу, що чудово, оскільки історія між браузерами тут дуже складна.

appearanceВластивість використовується для однієї з двох причин:

Щоб застосувати стилістику, специфічну для платформи, до елемента, який його не має за замовчуванням
Щоб видалити стилі, характерні для платформи, до елемента, який має його за замовчуванням

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

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

Або ви можете взяти введення з типом = текст і просто зробити це схожим на пошуковий ввід:

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

Значення WebKit

прапорець
радіо
натиснути кнопку
квадратна кнопка
кнопку
кнопка-скос
список
listitem
менуліст
меню-кнопка
менуліст-текст
менуліст-текстове поле
кнопка прокрутки вгору
прокрутка кнопка вниз
кнопка прокрутки вліво
кнопка прокрутки вправо
горизонтальна прокрутка
scrollbartrack-вертикальний
смуга прокрутки палець-горизонтальний
прокрутка
смужка прокрутки горизонтальна
смуга прокрутки вертикальна
повзун-горизонтальний
повзунок-вертикальний
повзунок-палець-горизонталь
повзунок-палець-вертикальний
карет
пошукове поле
пошукове поле-прикраса
пошукове поле-результати-прикраса
кнопка searchfield-results
кнопка пошуку-скасувати
текстове поле
текстова область

Значення Mozilla

жоден
кнопку
прапорець
прапорець-контейнер
прапорець-малий
діалогове вікно
список
пункт меню
менуліст
меню-кнопка
менуліст-текстове поле
спливаюче меню
індикатор виконання
радіо
радіо-контейнер
радіо-малий
ресайзер
смуга прокрутки
прокрутка кнопка вниз
кнопка прокрутки вліво
кнопка прокрутки вправо
кнопка прокрутки вгору
горизонтальна прокрутка
scrollbartrack-вертикальний
сепаратор
Рядок стану
вкладку
вкладка ліворуч Застаріла
табло
текстове поле
текстове поле-багаторядковий
панелі інструментів
кнопка панелі інструментів
набір інструментів
-moz-mac-unified-toolbar
-moz-win-без полів-скло
-moz-win-browsertabbar-toolbox
-moz-win-комунікації-інструментарій
-moz-win-glass
-moz-win-media-toolbox
підказка
treeheadercell
верхівки дерев
treeitem
treetwisty
treetwistyopen
деревопогляд
вікно

Ресурси

Mozilla Docs для -moz-вигляду
Трент Уолтон про зовнішній вигляд Webkit
Шон Інман про вимкнення внутрішнього текстового тіні введення тексту на iPad
CSS3 Специфікація

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.