KategorieWeb Developer

[CSS] Jak ustawić style dla tekstu zastępczego (placeholder) w polu input ?

Wraz z pojawieniem się standardu HTML5 otrzymaliśmy możliwość wykorzystania atrybutu placeholder, który ustawia tekst zastępczy elementu input, gdy ten jest pusty. Standard CSS3 określa pseudo element “::input-placeholder” którym powinniśmy się posługiwać przy definiowaniu styli dla tekstu zastępczego.

Niestety jak wiemy świat nie jest idealny i przeglądarki w większości wykorzystują prefiksy. Tak więc konieczne jest zapisanie definicji pseudo elementu dla każdej przeglądarki osobno, tak jak zostało zrobione to poniżej:

[css]
::-webkit-input-placeholder {
color: red;
}

:-moz-placeholder { /* Firefox 18- */
color: red;
}

::-moz-placeholder { /* Firefox 19+ */
color: red;
}

:-ms-input-placeholder {
color: red;
}
[/css]

Dla osób nieco znających CSS-y powiem od razu że nie można tego zapisu uprościć do postaci:

[css]
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder
{
…style…
}
[/css]

Powyższy zapis nie zadziała, gdyż nie ma przedlądarki która by rozumiała prefiks ::-webkit-* i :-moz-* jednocześnie.