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

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

Регистрация: 05.10.2019

Сообщений: 10

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

Недавно начал изучать HTML, наткнулся в тырнетах на видео какого-то челика, он там делал строку поиска. Пытался повторить, но чёт немножечко не получилось.
1. В поле ввода текст тёмный, хотя я указывал ему светлый цвет. Но когда начинаешь вводить что-то, он становится нормальным.
2. В полноэкранном режиме всё норм, но когда сворачиваешь окно иконка почему-то вылезает.

У кого-нибудь есть идеи?

body < margin: 0; padding: 0; background: #f7f7f7; >.search-box < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f8fafd; height: 82px; border-radius: 82px; padding: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.2); >.search-box:hover > .search-txt < width: 600px; padding: 0 6px; margin-left: 20px; >.search-btn < float: right; width: 82px; border-radius: 50%; background: none; display: flex; justify-content: center; align-items: center; transition: 0.4s; color: #bac8f5; cursor: pointer; margin-top: 21px; >.search-txt

My name’s Pitt, and your ass ain’t talking your way out of this shit

Как изменить цвет текста и фона в текстовом поле?

Установить цвет фона и текста для однострочного текстового поля формы.

Решение

Цвет фона элемента задается стилевым свойством background-color , а цвет текста с помощью color , эти свойства необходимо добавить к селектору INPUT . Поскольку тег является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.

Пример 1. Цвет текста и фона в текстовом поле

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля после добавления к нему стилей

В данном примере добавляется новый класс с именем colortext , он добавляется к тегу с помощью конструкции class=»textfield» .

Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу в этом случае всегда добавляется атрибут type . Используя запись INPUT[type=»text»] задаем стиль для всех элементов , но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).

Пример 2. Использование селекторов атрибутов

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

     INPUT[type="text"] 

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

Для изменения цвета выделяемого текста используйте псевдоэлемент ::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 нет.

Как изменить цвет placeholder.

Как известно, буквально несколько лет назад в браузерах появилась интересная возможность устанавливать для текстовых полей input на веб-страницах какие-то текстовые значение по умолчанию.

Причем, эти текстовые значения автоматически исчезают, когда пользователь начинает вводить в текстовое поле какую-либо информацию.

Такой эффект достигается за счет использования атрибута placeholder. Почитать подробнее об этом атрибуте можно здесь.

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

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

::-webkit-input-placeholder < /* WebKit browsers */ color: red; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: red; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: red; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: red; >

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: