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

[Dúvida] O Padding-left não está movendo meu placeholder

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

por Marcus Martini Silva
| 12.3k xp | 2 posts
Estagiário

Não estou conseguindo mover o texto do placeholder, o background-position está ali para alinhar o ícone com o texto.
Código CSS do placeholder

.contato__email::placeholder{
    font-family: var(--fonte-principal);
    font-size: 16px;
    color: var(--azul);
    background: url("../Imagens/Email.svg") no-repeat;
    background-position: 1.5em;
    padding-left: 2.5em;
}

Código do HTML da section do rodapé

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

!Imagem do projeto da AluraBooks, na seção input do email o ícone de envelope e o texto que lê "Cadastre seu e-mail" se sobrepõem(https://cdn1.gnarususercontent.com.br/1/7751753/f8243d0c-780b-4f90-b387-377a3c41f6f3.png)

2 respostas
solução!
por Victor Vasconcelos Viana
| 16.4k xp | 1 posts

::placeholder serve apenas para estilizar o texto (fonte, cor, etc.), não aceita padding, nem background

O background e o padding-left ficam no input (.contato__email), porque isso desloca todo o conteúdo de texto, incluindo o placeholder e o que o usuário digita

O ::placeholder só mantém a formatação visual do texto (cor, fonte, tamanho)

Exemplo de acordo com seu código:
.contato__email {
font-family: var(--fonte-principal);
font-size: 16px;
color: var(--azul);
background: url("../Imagens/Email.svg") no-repeat;
background-position: 1.5em center;
padding-left: 2.5em; /* aqui sim move o texto do placeholder e o texto digitado*/
}

.contato__email::placeholder {
color: var(--azul);
font-family: var(--fonte-principal);
font-size: 16px;
}

por Marcus Martini Silva
| 12.3k xp | 2 posts
Estagiário

Deu certo, valeu! Não tinha entendido essa interação do ::placeholder