Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Problema com o placeholder do e-mail no navegador firefox

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Contato e footer

por Gustavo Henrique Mota Gomes
| 98.3k xp | 1 posts

Oi, tudo bem? Apesar de estar funcionando no navegador chrome, não consigo arrumar a escrita do placeholder no navegador Firefox utilizando o padding-left. Quando utilizo o align-items: center da certo mas não corresponde ao figma. Qual outra propriedade posso utilizar?

.contato__email::placeholder { font-family: var(--fonte-principal); color: var(--fonte-azul); background: url(../img/Email-1.svg) no-repeat; background-position: 1em; padding-left: 3em;}

Imagem do cadastro de e-mail no chrome com o ícone de e-mail ao lado da escrita Imagem do firefox com a escrita se sobrepondo ao ícone de e-mail

1 resposta
solução!
por Lorena Garcia
| 10548.4k xp | 15690 posts
Alura Scuba Team

Oi Gustavo, tudo bem?

Fiz alguns testes e infelizmente no mozilla não vai ficar igual ao figma, fiz assim:

.contato__email::placeholder {
    font-family: var(--fonte-principal);
    color: var(--azul);
    background: url("../img/Email.svg") no-repeat;
    background-position: 5px center;
    padding-left: 2rem;
}
.contato__email:placeholder-shown {
    color: var(--azul);
    padding-left: 2rem;
}

A pseudo-classe :placeholder-shown seleciona o próprio input quando o texto do placeholder existe em um input de formulário. Vou deixar aqui um artigo muito bom sobre essa pseudo-classe, recomendo a leitura.

A visualização fica assim no mozilla:

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

Você pode modificar como achar melhor.

Um abraço e bons estudos.