Псевдоэлемент ::placeholder | CSS | WebReference
- Содержание
- Синтаксис
- Пример
- Примечание
- Браузеры
Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.
Синтаксис
Селектор::placeholder { ... }Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>placeholder</title> <style> body { background: #053f38; } input[type=»search»] { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } input[type=»search»]::-moz-placeholder { color: #ffd595; /* Цвет подсказывающего текста */ } input[type=»search»]::-webkit-input-placeholder { color: #ffd595; } input[type=»search»]:-ms-input-placeholder { color: #ffd595; } input[type=»search»]::-ms-input-placeholder { color: #ffd595; } input[type=»search»]::placeholder { color: #ffd595; } </style> </head> <body> <form action=»handler.
php»>
<p><input type=»search» placeholder=»Поиск по сайту» name=»q»>
<input type=»submit» value=»Найти»></p>
</form>
</body>
</html>Результат примера показан на рис. 1.
Рис. 1. Использование ::placeholder
Примечание
Internet Explorer использует псевдокласс :-ms-input-placeholder.
Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder.
Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder.
Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder.
Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder.
Браузеры
| 10 | 12 | 4 | 57 | 15 | 44 | 5 | 10. 1 | 4 | 19 | 51 |
| 2.1 | 19 | 30 | 4.3 | 10.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Псевдоэлементы
См. также
- Атрибут placeholder
- Подсказка в поле формы
- Подсказывающий текст
- Псевдокласс :placeholder-shown
Практика
- Подсказка
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.
08.2017
Редакторы: Влад Мержевич
Стилизация ползунка
Добрый день! Тема сегодняшней рубрики css — стилизация ползунка(поля range). Итак, приступим к рассмотрению!
Для начала создадим ползунок:
<input type="range" min="0" max="100" value="50" name="range" step="1"/>
Видим ползунок со стандартными стилями, причем в разных браузерах он будет отображаться по разному.
Зададим ему ширину 200px.
input[type=range] {
width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}Здесь помимо ширины мы указали специальное свойство appearance которое отвечает за базовые стили отображения элемента вашей операционной системы.
Значение ‘none’ указывает на то что мы эти стили сбрасываем. По итогу поле range будет отображаться не полностью. Это нам необходимо чтобы задать свои собственные стили для ползунка. Заметьте что вместе со свойством ‘appearance’ мы используем вендорные префиксы -webkit — Для браузеров на движке хромиум(google chrome) и -moz — для браузера mozilla firefox.
Теперь давайте попробуем стилизовать ползунок, делается это через специальные псевдоселекторы.
input[type=range] {
width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
border-radius: 10px/100%;
height: 7px;
border: 1px solid cyan;
background-color: #fff;
}
input[type=range]::-webkit-slider-thumb {
background: #ecf0f1;
border: 1px solid cyan;
border-radius: 10px/100%;
cursor: pointer;
width:15px;
height: 15px;
-webkit-appearance: none;
margin-top: -4px;
}
input[type=range]::-moz-range-track {
border-radius: 10px/100%;
height: 5px;
border: 1px solid cyan;
background-color: #fff;
}
input[type=range]::-moz-range-thumb {
background: #ecf0f1;
border: 1px solid cyan;
border-radius: 10px/100%;
cursor: pointer;
} Для браузеров webkit(google chrome, chromium) используются псевдоселекторы -webkit-slider-runnable-track, -webkit-slider-thumb, а для mozilla firefox -moz-range-track,
-moz-range-thumb.
track — на конце каждого псевдоселектора отвечает за стилизацию полосы ползунка, а thumb за сам элемент ползунка. Отображение в разных браузерах может немного отличаться но в целом по стилистике будет одинаковым. Можете взять пример и поиграться со стилями!
Еще один пример стилизации:
input[type=range] {
width: 200px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
overflow: hidden;
height: 7px;
}
input[type=range]::-webkit-slider-runnable-track {
height: 7px;
background-color: blue;
}
input[type=range]::-webkit-slider-thumb {
background: #ecf0f1;
cursor: pointer;
width:15px;
height: 15px;
-webkit-appearance: none;
margin-top: -4px;
box-shadow: -200px 0 0 200px #43e5f7;
}
input[type=range]::-moz-range-track {
height: 7px;
background-color: blue;
}
input[type=range]::-moz-range-thumb {
background: #ecf0f1;
cursor: pointer;
height: 7px;
border-radius:0px;
box-shadow: -200px 0px 0px 200px #43e5f7;
padding: 0px;
margin: 0px;
} Здесь получили другое отображение ползунка с эффектом выделения выбранного диапазона.
На этом в принципе у меня все. Если статья оказалась для вас полезной, подписывайтесь на группу Вконтакте и переходите на мой канал Youtube.
Всем удачи и здоровья!
Как удалить и оформить рамку вокруг полей ввода текста в Google Chrome
В Google Chrome поля формы, такие как ,