Как изменить цвет текста в input css

Изменение цвета текста placeholder в HTML с помощью CSS

Для измениния цвета placeholder’а вашего input’а в разных браузерах с помощью CSS вы можете использовать следующий код:

Скопировать код

/* Для современных браузеров */ ::placeholder < color: red; /* Вкус клубники? Да, пожалуйста! �� */ >/* WebKit: Chrome, Safari, Opera 15+ */ ::-webkit-input-placeholder < color: red; /* В WebKit разбираются в делах! */ >/* Firefox 19+ */ ::-moz-placeholder < color: red; opacity: 1; /* Эй, Firefox, не делай моих детей прозрачными! */ >/* IE 10+, Edge */ :-ms-input-placeholder < color: red; /* Даже IE решил присоединиться к вечеринке */ >

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

Глубокое погружение: что еще стоит учесть?

Стилизация placeholder’а может быть затруднительной. Давайте разберемся в этом подробнее:

Необходимость выбора доступных цветов

При выборе цветов, обеспечьте хороший контраст с фоном input’а. Это важно как с эстетической точки зрения, так и для облегчения чтения людьми со слабым зрением. Согласно Руководству по доступности контента в сети (WCAG), контрастное соотношение цвета вашего текста и его фона должно быть не менее 4.5:1.

Оставьте пространство для переводов

Текст placeholder’а должен учитывать особенности перевода на другие языки. Поверьте, на немецком (который может быть очень длинным!), ваше сообщение может выглядеть так, как будто оно переполняет доступное пространство.

Равномерность браузеро-специфических стилей

Знаете, как каждый браузер стремится быть уникальным и создавать проблемы? Давайте будем честными и сделаем стили одинаковыми для всех:

Скопировать код

input < -moz-appearance: textfield; /* Эй, Firefox, будь немного мягче! */ -webkit-appearance: textfield; /* Chrome, Safari, учтем и вас! */ appearance: textfield; /* И поделимся любовью со всеми */ >

Возможные сложности с кросс-браузерной совместимостью

Не забывайте золотое правило веб-разработки: «Всегда тестируй всё!». С -webkit-input-placeholder специфичным для браузеров WebKit, каждый браузер может воспринять стили вашего placeholder’а, по-своему, особенно когда вы используете атрибуты border или background-color.

Если возможно, избегайте !important

И, кстати, по возможности, избегайте !important . Это может показаться магическим решением всех проблем, однако в действительности может приводить к большим проблемам.

Placeholder и label: это разные вещи!

Не используйте placeholder вместо элемента label. Они выполняют разные функции: label предоставляет доступное название для элементов формы, тогда как placeholder служит как рассказчик, дающий полезные подсказки.

Визуализация

Давайте визуализируем, как CSS меняет цвет placeholder’а:

Как изменить цвет вводимого текста в окне input?

Появилась такая проблема что при вводе в форме input вводимый текст отображается прозрачным.

Как его изменить на чёрный?

• Вопрос задан более трёх лет назад
• 2035 просмотров

Комментировать
Решения вопроса 2

потому что изначально для input указан color с неким opacity
можно сделать так:
input:focus color: black
>

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

Мимо проходил
::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholder
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +3 ещё

Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?

• 1 подписчик
• 10 часов назад
• 27 просмотров

Не получается изменить цвет текста или слова, как это исправить?

В видеоуроке класс называется не siddebar, а sidebar. Вот еще ошибки:

input[type="text"], input[type=;"password"], input[type="swarch"]

В видеоуроке нет input[type=;«password»], input[type ], в уроке так написано:

input[type="text"], input[type="password"], input[type="search"]

Sign up or Log in to write an answer

• Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

• Отзывы
• Политика конфидециальности
• Условия использования
• Блог
• Цена и оплата
• Курсы и скринкасты
• Сертификаты
• Партнерская программа
• Комьюнити

Наши курсы и скринкасты

• HTML/CSS Advanced
• Bootstrap 4
• Vue JS
• Linux, GIT and web-hosting
• HTML and CSS
• Modern Javascript
• Javascript/jQuery
• Codeigniter
• Все курсы и скринкасты

Как изменить цвет выделяемого текста и цвет подсказки в полях ввода

Для изменения цвета выделяемого текста используйте псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.

::selection < color: #0664C9; text-shadow: none; >/* Safari */ ::-moz-selection < color: #0664C9; text-shadow: none; >/* Firefox */

placeholder — текст-подсказка для элементов ввода.

Задается он следующим образом:

Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.

Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

CSS правила для webkit и mozilla:

input::-webkit-input-placeholder <> input:-moz-placeholder <> Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете: input:-moz-placeholder, input::-webkit-input-placeholder < >то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно. Еще несколько примеров: /* стили для webkit */ #field2::-webkit-input-placeholder < color:#00f; >#field3::-webkit-input-placeholder < color:#090; background:lightgreen; text-transform:uppercase; >#field4::-webkit-input-placeholder < font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; >/* стили для mozilla */ #field2:-moz-placeholder < color:#00f; >#field3:-moz-placeholder < color:#090; background:lightgreen; text-transform:uppercase; >#field4:-moz-placeholder

Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.