Заменящо място е елемент от полето за въвеждане, в което може да се постави подсказка. Когато потребителят започне да въвежда данни, спомагателният текст изчезва, за да не се намесва. Всеки браузър има своя собствена идея как да покаже този елемент, а понякога стиловете по подразбиране разрушават целия дизайн. За да ги управлявате, трябва да използвате специален CSS правило.

Къде е мястото?

Проблемът е, че подканата на полето за въвеждане е сигурно скрита в сянката DOM, а стигането до нея не е толкова лесно. Това използва специален нестандартен CSS :: псевдоелемент placeholder. Тя може да ви помогне да управлявате свойствата на намека.

Стилизацията на контейнера в CSS изглежда така:

input :: placeholder {
цвят: червен;
непрозрачност: 1;
стил на шрифта: курсив;
}

Поддръжка на браузъри

Псевдоелементът CSS е добре обработен от всички модерни браузъри и можете да използвате префиксите за поддръжка на по-старите браузъри: .googlesyndication.com /pagead /js /adsbygoogle.js "& gt;
& lt ;! - fb_336x280_1 - & gt;

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

• :: - webkit-input-placeholder - за webkit-браузъри (Mozilla, Chrome, Opera);
• :: - moz-placeholder - за браузъри Firefox по-горе версия 19;
• : -moz-placeholder - за по-старите Firefox;
• : -ms-input-placeholder - за Internet Explorer над версия 10.

Както виждате, старите браузъри на Mozilla, както и IE, разглеждат мястото CSS-псевдо-класа вместо псевдо-елемента. Няма да спорим с тях, просто обмислете този аспект, когато стилизирате полето за въвеждане.

Възможностистайлинг

За псевдоелемента на контейнера в CSS можете да зададете следните параметри:

• фон - група от фонови свойства. Фонът на блока за подкани се прилага за цялото поле за въвеждане. Можете да укажете не само цвета (фонов цвят), но и изображението (фоново изображение).
• цвят на текста - цвят;
прозрачност - непрозрачност;
• подчертаване, зачертаване или зачертаване на текста;
• регистър - преобразуване на текст;
• вътрешни отстъпи - подложка. Не се поддържа от всички браузъри. Що се отнася до елементарните елементи, горната и долната граници се игнорират.
• дисплей на шрифта - свойствата на групата шрифтове, височината на линията и различните отстъпи (текстови отстъп, разстояние между буквите, интервал между думите);
• вертикално подравняване в линията - вертикално подравняване;
• изрязване на текст с препълване на контейнера - преливане на текст.

.input1 :: placeholder {
 background-image: линеен градиент (вар, син);
цвят: бял; 
}
.input2 :: placeholder {
 text-decoration: line-through;
цвят: черен;
тегло на шрифта: удебелен; 
}
.input3 :: placeholder {
 размер на шрифта: 16px;
разстояние между буквите: 10px; 
}
.input4 :: placeholder {
 фон: кафяв;
цвят: бял;
преливане на текст: елипса; 
}

Във фокус

По подразбиране подканата изчезва от полето за въвеждане, само ако има поне един въведен знак. Но псевдоелементът CSS placeholder ви позволява незабавно да изчезне, когато се фокусирате върху полето. За да направите това, трябва да го комбинирате с псевдокласа: focus.

вход: focus :: placeholder {
 цвят: прозрачен; 
}

В някои браузъри е допустимо да се анимира промяната на редица свойства на собственика на сайта, като се използва инструкцията за прехвърляне.