O ::placeholderpseudo elemento (ou uma pseudo classe, em alguns casos, dependendo da implementação do navegador) permite que você estilize o texto do espaço reservado de um elemento de formulário. Como em, o texto definido com o placeholderatributo:
Você pode estilizar esse texto na maioria dos navegadores com alguns seletores com prefixo do fornecedor:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Aviso importante: esta sintaxe não é padronizada, daí toda a loucura de nomenclatura. Ele não aparece na especificação. :placeholder-showné padrão, e até mesmo os autores das especificações parecem pensar ::placeholderque será a versão padronizada.
Como qualquer psuedo, você pode aplicá-lo a elementos específicos conforme necessário, como:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
A diferença entre :placeholder-showne::placeholder
:placeholder-shownserve para selecionar a própria entrada quando seu texto de espaço reservado está sendo mostrado. Ao contrário de ::placeholderquais estilos o texto do espaço reservado.
Aqui está um diagrama:
Achei isso muito confuso porque:
- as especificações só têm
:placeholder-showne não::placeholder :placeholder-shownainda pode afetar o estilo do texto do espaço reservado, uma vez que é um elemento pai (por exemplo, tamanho da fonte).
Observe que :placeholder-showné uma pseudo classe (é um elemento em um estado particular) e ::placeholderé um pseudo elemento (uma coisa visível que não está realmente no DOM). Distinguível por dois pontos simples versus duplos.
Tab Atkins esclareceu para mim por e-mail:
: placeholder-mostrado, sendo uma pseudo-classe, tem que selecionar um elemento existente - ele seleciona a entrada sempre que você está no estado de exibição de espaço reservado. O pseudo-elemento :: placeholder envolve o texto real do placeholder.
Elemento ou classe?
Esta funcionalidade não é padronizada. Isso significa que cada navegador tem uma ideia diferente sobre como deve funcionar.
O Firefox originalmente implementou isso como uma pseudo classe, mas mudou por uma série de razões. Para encurtar a história, você não pode fazer tanto com uma pseudo aula.
Por exemplo, se você deseja alterar a cor do texto quando a entrada está em foco. Você usaria um seletor como input:focus::placeholder, o que não seria capaz de fazer com uma pseudo classe (eles não são empilhados da mesma forma).
O IE10 oferece suporte a isso como uma pseudo classe, em vez de um elemento. Todos os outros implementaram um pseudo elemento.
Cor do marcador do Firefox
Você pode notar como no Firefox a cor do marcador parece desbotada em comparação com outros navegadores. Na imagem abaixo, o Firefox 43 é mostrado à esquerda enquanto o Chrome 47 é mostrado à direita:
Isso ocorre porque, por padrão, todos os marcadores de posição no Firefox têm um valor de opacidade aplicado a eles, portanto, para corrigir isso, precisamos redefinir esse valor:
::-moz-placeholder ( opacity: 1; )Você pode ver mais testando esta demonstração no Firefox.
Estilos Suportados
O pseudo elemento oferece suporte ao estilo dessas propriedades:
fontpropriedadescolorbackgroundpropriedadesword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
A pseudo classe suporta a maioria (se não todas) dessas propriedades também, mas não é tão flexível pelos motivos descritos acima.
Suporte de navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 57 | 19 * | Não | 79 | 10,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,3 |
Propriedades relacionadas
Almanaque em 22 de maio de 2020: placeholder-mostrado
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham