Jak obarvit placeholder?

Barva nápovědy v inputu vytvořené pomocí "placeholder".

Využití atributu "placeholder" pro nápovědu v rámci formuláře je v dnešní době běžnou praxí. Dřívější variace s vlastnostmi "onfocus, onblur" fungují stejně dobře, ale nejsou tak elegantní. Problém nastává pokud chcete text nápovědy obarvit třeba na červenou. Ve variantě "onfocus/onblur" to problém není, ale u placeholderu?

K tomuto účelu slouží pseudotřídy.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}

Možná se ptáte "A co starší verze Internet Explorer?". Odpověď je prostá "Placeholder v nich neexistuje tudíž ani pseudotřídy nemohou nic obarvovat.".

Mezi Firefoxem a Chrome může nastat problém i se sytostí dané barvy. Firefox má přednastavnou určitou průhlednost textu v placeholderu, což napraví opět pseudotřída.

::-moz-placeholder {
  opacity: 1;
}

Tyto pseudotřídy povolují pracovat s těmito vlastnostmi:
font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-indent, opacity

<< zpět