Как изменить цвет выделяемого текста и цвет подсказки в полях ввода
Для изменения цвета выделяемого текста используйте псевдоэлемент selection и placeholder - текст-подсказка для элементов ввода.
Для изменения цвета выделяемого текста используйте псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.
::selection { color: #0664C9; text-shadow: none; } /* Safari */ ::-moz-selection { color: #0664C9; text-shadow: none; } /* Firefox */
placeholder - текст-подсказка для элементов ввода.
Задается он следующим образом:
<input type=«text» placeholder=«type here some text» />
Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью 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 { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.