Segui exatamente como é dito para ser feito no vídeo "Contato e Footer" da Aula 03: Integrando o Carrossel com SwiperJS. O código é o seguinte:
.contato__email {
padding: 1em;
border: 1px solid var(--azul);
border-radius: 24px;
width: 90%;
color: var(--azul);
}
.contato__email::placeholder {
font-family: var(--fonte-principal);
color: var(--azul);
background: url("../img/email.svg") no-repeat;
background-position: 1em;
padding-left: 3em;
}
Uso o Firefox, e o meu resultado não coincidia com o que acontecia com o vídeo. Vim no fórum e descobri que isso acontece apenas no Firefox, mesmo atualizado.
Adicionei o background-position pois um dos bugs que só acontecem no Firefox, também, é a imagem estar cortada para a esquerda.
Há alguma forma de resolver? Ou eu só ignoro a existência de pessoas que usam navegadores diferentes do Chrome?
Como fica no Google Chrome:
Como fica no Firefox:
