Pseudoclasse placeholder-shown

A pseudoclasse placeholder-shown define o estilo de um input ou textarea quando o chamado texto de dica está sendo exibido, que desaparece após o início da digitação do texto.

Sintaxe

cssseletor:placeholder-shown {}

Exemplo

Vamos definir uma borda vermelha para o input onde o texto de dica está sendo exibido, e após a digitação do texto, a borda deve mudar para verde:

html<form>
  <input placeholder="digite o texto">
</form>
cssinput {
  border: 1px solid green;
}
input:placeholder-shown {
  border-color: red;
}

Результат:

Veja também

  • o atributo placeholder,
    que define a dica para o campo de entrada
  • o pseudoelemento placeholder,
    que define os estilos para a dica