Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Sugestão] 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 Murillo Zubk da Silva
| 72.4k xp | 6 posts

minha solução para o envelope e o texto ficarem sobre posto foi dar um espaço no texto

html

  <section class="contato">
        <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
        <p class="contato__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
        <input type="email" placeholder="       Cadastre seu e-mail" class="contato__email">
    </section>

css

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

.contato__email::placeholder-shown {
    color: var(--azul);
    padding-left: 2rem;
}

antes

email cobrindo o texto

FireFox

FireFox

Chrome

Chrome

3 respostas
solução!
por Renan Lima
| 3652k xp | 7697 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Murillo,.

Tudo bem?

Ai sim, ficou muito legal, valeu por compartilhar essa solução! Só uma dúvida, no Chrome ficou legal também ou ficou diferente?

Valeu!

por Murillo Zubk da Silva
| 72.4k xp | 6 posts

Olá Renan.

testei no Chrome, Opera, Edge e ficou igual no Figma. apenas no FireFox que ficou diferente .

por Renan Lima
| 3652k xp | 7697 posts
Alura Scuba Team Apoio Educacional - Alura

Ah sim que top! Eu enfrentei esse problema e quando eu arrumava no FireFox ele mudava no Chrome e vice versa ficava um espação, eu tentei aproximar o máximo possível um do outro. Muito bom, parabéns.