Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Acessar Placeholder na aba inspecionar

Olá.

Gostaria de saber se tem como acessar o pseudo-elemento placeholder na aba inspecionar do Chrome? Só consegui achar algumas pseudo-classes.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Oi Julio, tudo be,?

Você precisa clicar bem no campo de entrada para selecioná-lo.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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.

  1. 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.

  2. 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!