Olá.
Gostaria de saber se tem como acessar o pseudo-elemento placeholder na aba inspecionar do Chrome? Só consegui achar algumas pseudo-classes.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá.
Gostaria de saber se tem como acessar o pseudo-elemento placeholder na aba inspecionar do Chrome? Só consegui achar algumas pseudo-classes.
Oi Julio, tudo be,?
Você precisa clicar bem no campo de entrada para selecioná-lo.
No painel de estilos à direita, você verá os estilos aplicados ao elemento selecionado. Para adicionar um novo estilo para o ::placeholder, clique no ícone "+" para criar uma nova regra CSS.
Na nova regra, você deve digitar o seletor do campo de entrada seguido de ::placeholder. Por exemplo, se o seu campo de entrada tem a classe .contato__email, você escreveria .contato__email::placeholder.
Agora você pode adicionar as declarações de estilo CSS que deseja aplicar ao placeholder, como color, font-size, font-weight, etc.
Aqui está um exemplo prático de como ficaria no DevTools:
.contato__email::placeholder {
color: #888;
font-size: 1em;
/* Adicione mais estilos conforme necessário */
}
As mudanças feitas no DevTools são temporárias e não serão salvas no arquivo CSS original. Para tornar as alterações permanentes, você precisa editar o arquivo CSS do seu projeto com os estilos que você experimentou no DevTools.
Um abraço e bons estudos.
Espero ter ajudado e bons estudos!