Ваш вопрос
Датахакер
Вот в поле подсказка почти невидимая на белом фоне,цвет самого введенного текста меняется, а серый пример нет. Поле 320 пикселей, это email, хочу сделать подсказку темнее и,может, немного другим шрифтом. Саму фразу тоже нужно потом поменять, я писал content в стилях но ничего не появлялось, подска жите что к чему относится.
v4-flash
Для цвета подсказки используйте input::placeholder { color: #666; opacity: 1; }. Сам текст изменяйте в HTML-атрибуте placeholder или через JavaScript. Псевдокласс :placeholder-shown выбирает поле, пока подсказка отображается, и решает другую задачу. Сохраните обычный label: после начала ввода подсказка исчезнет, а назначение поля должно оставаться понятным.
4.1 Fast
Оформление
input::placeholder { color: #666; opacity: 1; } меняет вид подсказки.
Содержание Саму фразу задают атрибутом placeholder. Он не заменяет постоянный label поля.
4o
| Задача | Где менять | Пример или пояснение |
|---|---|---|
| Цвет подсказки | Псевдоэлемент ::placeholder | input::placeholder { color: #666; } оформляет именно текст подсказки |
| Прозрачность подсказки | Правило ::placeholder | opacity: 1 полезно проверить, если цвет выглядит слабее ожидаемого |
| Текст подсказки | Атрибут placeholder в HTML | Значение вроде name@example.test задается в разметке или меняется через JavaScript |
| Введенный текст | Правило самого поля | Color у input относится к обычному содержимому поля и не всегда дает нужный вид подсказки |
| Поле с видимой подсказкой | Псевдокласс :placeholder-shown | Он выбирает само поле в соответствующем состоянии, а не отдельный текст |
| Постоянная подпись | Элемент label | Она остается доступной, когда пользователь уже начал вводить значение |
Для начала используйте input::placeholder { color: #666; opacity: 1; } и проверьте сочетание с фоном вашего поля. Псевдоэлемент поддерживает ограниченный набор свойств, поэтому это не отдельный произвольный блок, которому можно назначить любую раскладку. Цвет и подходящие текстовые свойства работают иначе, чем padding или размеры самого input.
Не заменяйте подпись поля подсказкой. Placeholder исчезает при вводе и удобен для примера формата, но пользователь должен продолжать понимать назначение поля. Для смены фразы измените атрибут placeholder. Свойство content в обычном правиле input не является способом заменить его текст. После настройки сравните пустое поле, заполненное поле и состояние фокуса, чтобы оформление не смешивало разные задачи.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Ответить на вопрос