Styling placeholder text with css

Псевдоэлементы

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

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

::before/:before

Псевдоэлемент , также как и его сосед добавляет содержимое (текст или форму) к другому элементу HTML. Еще раз отмечу, что этого контента нет в DOM, но им можно манипулировать, как будто он есть. Свойство надо добавлять в CSS.

Запомните, что добавленный в псевдоэлемент текст нельзя выделить.

В результате будет выведено:

Примечание: Обратили внимание на пробел после “Hello ”? Да, о пробелах надо позаботиться самостоятельно

::after/:after

Псевдоэлемент также используется для добавления содержимого (текста или формы) к другому элементу HTML. Этот контент отсутствует в DOM, но им можно манипулировать, как будто он есть; свойство надо добавлять в CSS. Текст, добавленный в псевдоэлемент, нельзя выделить.

В результате будет выведено:

::backdrop (эксп.)

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

Примечание: для псевдоэлемента обязательно двойное двоеточие, иначе он не работает.

Разовьем наш пример с псевдоклассом :

Демо:

See the Pen CSS ::backdrop pseudo-element by Ricardo Zea (@ricardozea) on CodePen.

::first-letter/:first-letter

Псевдоэлемент выбирает первый символ на строке текста. Если перед текстом есть элемент типа изображения, видео или таблицы, он не влияет на текст и первая буква по-прежнему выбирается из текста.

Это отличная вещь для использования в параграфах, для повышения типографской привлекательности без использования изображений и внешних ресурсов.

Совет: этот псевдоэлемент способен захватывать первую букву, сгенерированного контента в , несмотря на его отсутствие в DOM.

::first-line/:first-line

Псевдоэлемент выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.

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

::selection

Псевдоэлемент используется для стилизации выделенного текста. Браузеры на движке Gecko пока используют версию с префиксом .

Примечание: сочетание в одном правиле синтаксиса с префиксом и без префикса не работает, надо создавать два отдельных правила.

::placeholder (эксп.)

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

Его также можно указывать как , этот синтаксис фактически и используется в CSS.

Примечание: этот элемент еще не является частью стандарта, с большой вероятностью его имплементация изменится в будущем, поэтому используйте его с осторожностью. В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:

В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:

Element

WebKit предоставляет псевлоэлементы ::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, и ::-webkit-meter-suboptimal-value для кастомизации отображения элемента <meter>.

Для того чтобы псевдоэлементы могли применять стили, вы должны установить свойство -webkit-appearance в значение none на самом элементе <meter>.

Только один из псевдоэлементов ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, and ::-webkit-meter-suboptimal-value Только один из псевдоэлементов, в зависимости от значения атрибута «value» элемента <meter>.

Взгляните на следующий пример:

<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>

meter { -webkit-appearance: none; }
::-webkit-meter-bar {
    height: 50px;
    background: white;
    border: 2px solid black;
}
::-webkit-meter-optimum-value { background: green; }
::-webkit-meter-suboptimum-value { background: orange; }
::-webkit-meter-even-less-good-value { background: blue; }

Вот так это выглядит в Chrome 26 в ОС Х:

Цвет замещающего текста | htmlbook.ru

В HTML5 к полям формы добавлен атрибут placeholder, который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.

<input placeholder=»Текст»>

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

Пример 1. Использование placeholder

HTML5CSS 2.1IECrOpSaFx

Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder.

input::-moz-placeholder { color: red; }

В Safari и Chrome стиль текста меняется следующим образом.

input::-webkit-input-placeholder { color: red; }

Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).

Пример 2. Цвет текста

HTML5CSS3IECrOpSaFx

Браузеры «не любят» группировать такой стиль, поэтому мне пришлось для отдельных браузеров повторить конструкцию.

Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.

How to Style Scrollbar in Textarea

When we add height to the and users write multiple lines of text then the browser shows a default scrollbar. Scrollbar may come horizontally and vertically.

If you don’t like the default look of those, you can style them according to your need. You can change their color, width, background, etc. And you don’t have to do this separately. You can customize both of them at the same time.

This will add a custom scrollbar to your input on both sides. Here, will style the background of the scrollbar and will style the scrollbar thumb, the part that moves.

But the above code will not work on the Firefox browser. Don’t worry you have another option.

You should add this code along with the above code then users will be able to see a custom scrollbar in both Chrome and Firefox browsers.

Firefox does not provide much customization options as Chrome does. You can not set a custom width for the scrollbar. The property accepts only 3 values , , and .

Here, is the default value and will remove your scrollbar in the Firefox browser. This is also an experimental technology. So I would suggest you not use this part on your main website.

If you want to know more about scrollbars, you can follow our ultimate guide on scrollbar customization.

But you can use 1st part and , this will work just fine.

input[type=range]

Gecko

Начиная с Firefox 22, Gecko предлагает псевдоэлементы ::-moz-range-track и ::-moz-range-thumb для стилизации input’ов-ползунков. К этим элементам можно применить большинство CSS-правил. Например:

<input type="range">

::-moz-range-track {
    border: 2px solid red;
    height: 20px;
    background: orange;
}
::-moz-range-thumb {
    background: blue;
    height: 30px;
}

Вот как это выглядит в браузере Firefox 22 и на OС X:

Trident

Trident предоставляет впечатляющее количество псевдоэлементов для кастомизации его ползунка выбора значения из диапазона.

• ::-ms-fill-lower: часть полоски, по которой ездит ползунок, под/перед самим ползунком.
• ::-ms-fill-upper: Часть полоски, по которой ездит ползунок, над/после самого ползунка.
• ::-ms-ticks-before: Область над/перед полоской ползунка с делениями.
• ::-ms-ticks-after: Область под/после полоски ползунка с делениями.
• ::-ms-thumb: Сам ползунок
• ::-ms-track: Полоска ползунка
• ::ms-tooltip: Всплывающая подсказка, которая появляется во время того, как пользователь выбирает значение в селекторе ползунка. Заметьте, что этот элемент не может быть стилизован, а только скрыт при помощи display: none.

Легче изобразить это на примере. Держите:

<input type="range">

::-ms-fill-lower { background: orange; }
::-ms-fill-upper { background: green; }
::-ms-thumb { background: red; }
::-ms-ticks-after { display: block; color: blue; }
::-ms-ticks-before { display: block; color: black; }
::-ms-track { padding: 20px 0; }
::-ms-tooltip { display: none; /* только показать и скрыть */ }

Именно так это будет выглядеть в браузере IE10 в Windows 8:

WebKit

WebKit предоставляет псевдоэлемент the ::-webkit-slider-runnable-track для полоски и ::-webkit-slider-thumb для самого ползунка. Хотя с ним и мало что можно сделать, но вы можете добавить цвета и отступы:

<input type="range">

::-webkit-slider-runnable-track {
    border: 2px solid red;
    background: green;
    padding: 2em 0;
}
::-webkit-slider-thumb {
    outline: 2px solid blue;
}

Вот так это выглядит в Chrome 26 на ОС Х:

И последнее замечание об input’ах-ползунках. Trident и Webkit позволяют менять вид самого ползунка при наведении с помощью псевдоэлементов (::-webkit-slider-thumb:hover и ::-ms-thumb:hover соответственно). Gecko в настоящий момент не может похвастаться такой возможностью.

Как выглядит плейсхолдер?

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

Плейсхолдер: строка поиска по каталогу

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

В некоторых случаях плейсхолдеры могут отпугнуть аудиторию и снизить число успешных регистраций

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

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

Плейсхолдер: переносится в заголовок поля

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

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

Стиль placeholder-a можно изменить с помощью такого набора css правил:

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

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

• font (и сопутствующие свойства)
• background (и сопутствующие свойства)
• color
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• text-overflow
• opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

1. в некоторых браузерах при получении фокуса инпутом
2. в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

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

Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS

3.0+
1.0+
4.0+
1.0+
1.0+
1.0+
1.0+

Решение

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

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

HTML5CSS 2.1IECrOpSaFx

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

Как работает placeholder?

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

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

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

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

2. Всегда учитывайте возможность неверного заполнения поля. В таком случае посетитель должен увидеть предупреждающее сообщение. Иначе человек попросту не сможет понять, что допустил неточность в процессе заполнения формы. Когда всплывающей подсказки нет, понять, что именно требует исправлений, бывает сложно.

3. Многие люди не запоминают содержание подсказки. Если она скрывается в процессе ввода, у пользователя не остаётся возможностей для её повторного вызова. Не заставляйте своих посетителей очищать поля ввода только для того, чтобы уточнить требования, предъявляемые к их содержимому. 

4. Не забывайте о необходимость использовать заголовки совместно с плейсхолдерами. Если убрать лейблы, посетитель может попросту забыть, что должно быть записано в то или иное поле. Подобных ситуаций следует избегать.

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

6. Существуют устоявшиеся представления о том, что бледные цвета, выбираемые для плейсхолдеров, выступают в качестве дополнительного индикатора, сигнализирующего о необходимости совершения каких-либо действий в том или ином поле. Но если на страницу регистрации придёт человек со слабым зрением, ему придётся испытать массу проблем при её заполнении. Всегда ставьте потребности целевой аудитории на первое место и старайтесь угодить всем пользователям, входящим в неё. 

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

Никому не нужны инструменты, снижающие уровень конверсии, даже если они выглядят модно и современно. Всегда оценивайте эффективность выбранного формата страниц и всплывающих подсказок. Не допускайте потерю клиентов из-за плейсхолдеров. Чтобы они работали правильно, придётся корректно их настраивать:

• Не заменяйте лейблы плейсхолдерами. Намного эффективнее они работают вместе.

• Цвет всплывающей подсказки должен явно контрастировать с выбранным фоном страницы. В противном случае вы не сможете добиться приемлемого уровня читаемости.

  

  

  

  

  

  

  

  

  

  

• Ряд браузеров вообще не работает с плейсхолдерами. Учитывайте возможные проблемы аудитории, программное обеспечение которой не желает воспринимать ваши подсказки. 

• Текст-заполнитель можно использовать только для небольших форм, состоящих из нескольких полей. Например, если от посетителя требуется ввести только логин и пароль. 

Думайте, в первую очередь, об удобстве посетителей, а не об эффективности используемого пространства. 

HTML / CSS изменить цвет выделения для текста

Изменить цвет выделения текста при помощи HTML / CSS. Ниже размещено несколько способов для изменения цвета выделения всего текста на сайте/страницы и только для отдельного текста по классу и индификатору (id).

Изменить цвет выделения для всего текста на сайте:

<style>::selection {color:#fff; background:#2BAECA;}::-moz-selection {color:#fff; background:#2BAECA;}::-webkit-selection {color:#fff; background:#2BAECA;}</style>

color:#fff; — это цвет текста при выделении.

background:#2BAECA; — это цвет фона текста при выделении.

Для демонстрации выделите любой текст на данной веб-странице сайта.

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

Данным способом можно изменить цвет выделения для отдельного текста на странице, при помощи класса (class) в теге div текста. Чуть ниже размещён ещё один вариант с использованием индификатора (id) текста.

CSS стили для сайта или отдельной страницы:

<style>div.red ::selection {color:#fff; background:#F25222;}div.red ::-moz-selection {color:#fff; background:#F25222;}div.red ::-webkit-selection {color:#fff; background:#F25222;}</style>

HTML-исходник текста:

<divclass=»red»><span>Ваш текст</span></div>

Демо-пример (демонстрация по классу):

Изменить цвет выделения по индификатору (id)

CSS стили для сайта или отдельной страницы:

<style>#wb_demo2 ::selection {color:#fff; background:#EAC030;}#wb_demo2 ::-moz-selection {color:#fff; background:#EAC030;}#wb_demo2 ::-webkit-selection {color:#fff; background:#EAC030;}</style>

wb_demo2 — это индификатор (id) блока div с текстом.

Демо-пример (демонстрация по id):

Выделите этот текст для демонстрации цвета выделения текста по id.

Accessibility Concerns

Being able to style placeholders is awesome. But I need to point out something really important — placeholder text doesn’t replace the label element, !! I was guilty of this when I first got into web programming . When your form relies purely on placeholder instructions without labels, it’s very harmful to accessibility. Accessibility is not only important to make your website accessible for everyone, but it’s also helpful for creating a better user experience. And ultimately creating a better website or web application

Here’s a really awesome article about the concerns of using placeholders only without any labels. Below are the top 3 points:

1. Because placeholder text is disappearing in nature, it can strain your user’s short term memory
2. Without labels, users cannot check their work before submitting a form.
3. When error messages occur, people don’t know how to fix the problem.

Изменение цвета заполнителя ввода HTML5 с помощью CSS

Chrome поддерживает атрибут placeholder on input элементы (другие, вероятно, тоже).

а после CSS ничего не делает со значением заполнителя:

Value останется grey вместо red .

есть ли способ изменить цвет текста-заполнителя?

реализация

существуют три различные реализации: псевдо-элементы, псевдо-классы и ничего.

• WebKit, Blink (Safari, Google Chrome, Opera 15+) и Microsoft Edge используют псевдо-элемент: ::-webkit-input-placeholder .
• Mozilla Firefox 4 до 18 использует псевдо-класс: :-moz-placeholder (один Колон).
• Mozilla Firefox 19+ использует псевдо-элемент: ::-moz-placeholder , но старый селектор все равно будет работать некоторое время.
• Internet Explorer 10 и 11 используют псевдокласс: :-ms-input-placeholder .
• апреля 2017 года: большинство современных браузеров поддерживают простой псевдо-элемент ::placeholder

Internet Explorer 9 и ниже не поддерживает , а Opera 12 и ниже не поддерживают любой селектор CSS для заполнителей.

дискуссия о лучшей реализации все еще продолжается

Обратите внимание, что псевдо-элементы действуют как реальные элементы в Shadow DOM. А padding на input не получит тот же цвет фона, что и псевдо-элемент

селекторы CSS

агенты пользователей должны игнорировать правило с неизвестным селектора. См.Селекторы Уровня 3:

Итак, нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет проигнорирована всеми браузерами.

Примечания

будьте осторожны, чтобы избежать неприятных контрастов

Заполнитель Firefox, похоже, по умолчанию с уменьшенной непрозрачностью, поэтому необходимо использовать opacity: 1 здесь.
обратите внимание, что текст заполнителя просто отрезается, если он не подходит – размер ваших входных элементов в em и проверить их с большими настройками минимального размера шрифта. Не забудьте переводы: некоторые языки нужно больше места для того же слова.
браузеры с поддержкой HTML для placeholder но без поддержки CSS для этого (например, Opera) также следует протестировать.
некоторые браузеры используют дополнительный CSS по умолчанию для некоторых input типы ( email , search )

Они могут повлиять на рендеринг неожиданными способами. Используйте свойства -webkit-appearance и -moz-appearance изменить. Пример:

это будет стиль все input и textarea заполнители.

Важное Замечание: не группируйте эти правила. Вместо этого создайте отдельное правило для каждого селектора (один недопустимый селектор в группе делает всю группу недопустимой)

Vendor Prefixes

So the syntax I used is supported by most modern browsers:

But for some browsers or older browsers, you will need to use the vendor prefixes.

Whoa! I know, that’s a huge list. And you might notice quite a few different variations of implementations. So let’s break down these differences and understand what’s going on here.

Pseudo-element vs Pseudo-class

You may notice that I use a double colon . This is called a pseudo-element and it was introduced in CSS3. If we used a single colon , this would be called a pseudo-class.

Because the pseudo-element, , was introduced in CSS3 and not the earlier CSS versions, some older browser such as Internet Explorer just never supported it. Whereas pseudo-class, , was introduced earlier (in CSS1 and CSS2). That’s why a lot more browsers, including Internet Explorer support it.

Therefore, in our vendor prefix, you will a mixture of pseudo-class and pseudo-element being used.

Firefox Placeholder Default Opacity

Okay, what’s this deal with for Firefox. That’s because, by default, Firefox’s placeholders have an opacity value applied to them. So to override this, we need to set it. That way our placeholder text will show up and doesn’t have the faded out appearance from the default Firefox setting.

CSS Handling Invalid Selectors

So you might also be thinking, why did we not just group all the vendor-prefixes together like this:

Well, that’s because there was a rule in CSS3 that states:

Let’s look at an example to see what this means. Here’s a valid CSS selector

So in our HTML, this will appear as expected

But what happens if we add in an invalid CSS selector

Since there is an invalid CSS selector in the group. The entire group would be deemed invalid and no styling will be applied.

That’s why we need separate rules for each browser. Otherwise, the entire group would be ignored by all browser.

️ BUT! it looks like this might be changed in CSS4.

Read more about this in an article by Chris Coyier, «One Invalid Pseudo Selector Equals an Entire Ignored Selector»

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

input placeholder demo

Вот сss:

css

/* плавное изменение прозрачности placeholder-а при фокусе */.input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}.input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}.input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}.input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}.input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}.input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}.input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}/* сдвиг placeholder-а вправо при фокусе*/.input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}.input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}.input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}.input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}.input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}.input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}.input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}/* сдвиг placeholder-а вниз при фокусе*/.input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}.input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}.input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}.input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}.input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}.input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}.input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}

Как изменить цвет текста при помощи css

Довольно часто веб разработчикам требуется поменять цвета на отдельных участках текста. Если это нужно сделать срочно и на скорую руку, то можно прописать требуемые значения color прямо в html-коде.

Например, поменяем цвет для отдельного тега вот так:
 

Здесь мы поменяли цвет текста на красный для жирного шрифта.

Или изменим некоторые области текста, который расположен между тегами  

Синтаксис примерно одинаковый, который описан чуть выше: 

Здесь какой-нибудь текст из вашего сайта

В этом примере цвет текста между тегами <p>…</p> поменяется на зеленый.

Но так обычно делается только для того, чтобы сделать правки на скорую руку. В идеале все стили для текста вы должны прописать в одном файле style.css.

Так что давайте все то же самое мы сделаем при помощи css.
 

Для того, чтобы изменить цвет текста на страницах вашего сайта вам нужно изменить параметр color: в таблице стилей CSS.

Выглядеть это будет вот так: 

p{font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; font-weight: 100; }/*здесь мы установили серый цвет для всех элементов расположенных между тегами p*/
h2{font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: blue; } /*для заголовка с тегом h2 установлен синий цвет*/
ul,li{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: green; }/*все буквы маркированного списка будут окрашены в зеленый цвет*/

Но текст не обязательно может быть между тегами <p>,<h2>,<ul>,<li> и т.д.

Текст может быть и в обычных контейнерах <div>, <span>. Тогда вам нужно будет прописать конкретные атрибуты класса или селектора id.
 

Здесь какой-нибудь текст из вашего сайта

Тогда в файле стилей нужно прописать стили для класса ”txt”: 

div.txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: black; }
/*задан черный цвет*/

Тоже самое, можно сделать при помощи селектора id. Выглядеть все будет вот таким образом:  

Здесь какой-нибудь текст из вашего сайта

В файле стилей уже нужно прописать стили для селектора ”txt”: 

div#txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: yellow; }
/*задан желтый цвет*/

Аналогично можно прописать цвета для всех тегов html отвечающих за вывод текста на вашем сайте.

Значения атрибутов class и id прописываются буквами латинского алфавита, цифр, знака подчеркивания и дефиса. Следует иметь в виду, что значения атрибутов class и id чувствительны к регистру.

Например, если прописать вот так:  

div#txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: yellow; }
div#Txt{font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: yellow; }

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

Настройки задаются либо своим пользователем или задаются по умолчанию.