[Dúvida] Imagem no campo de email

Outra coisa: não entendi porque na aula é usado padding no placeholder sendo que o correto é utilizar apenas no campo input, como já foi dito até em outras perguntas aqui no fórum.

Oi Nick, tudo bem? 😊

Analisando o seu código, entendo o problema que você está enfrentando com o posicionamento da imagem e do placeholder no campo de e-mail. 🤔

Para resolver essa questão, sugiro que você utilize a propriedade background-size para controlar o tamanho da imagem de fundo e garantir que ela não seja cortada pelo padding.

Além disso, você pode usar a propriedade padding-left no input para criar um espaço entre a imagem e o texto do placeholder, evitando que eles se sobreponham.

Aqui está um exemplo de como você pode ajustar o seu código:

.contact__email {
  color: var(--terciary-color);
  border: 1px solid var(--terciary-color);
  border-radius: 24px;
  width: 90%;
  padding: 1em;
  padding-left: 3em; /* Aumente o padding-left para dar espaço à imagem */
}

.contact__email::placeholder {
  font-family: var(--primary-font);
  color: var(--terciary-color);
  background: url("../img/Email.svg") no-repeat;
  background-position: 0.5em center; /* Ajuste a posição da imagem */
  background-size: 1.5em; /* Ajuste o tamanho da imagem */
  padding-left: 2em; /* Adicione padding-left ao placeholder */
}

Com essas alterações, a imagem deve ficar visível e o placeholder não deve ser coberto. 👍

Quanto à sua segunda pergunta, sobre o uso de padding no placeholder, o ideal é utilizar o padding no campo input para garantir a acessibilidade e o correto funcionamento em diferentes navegadores.

No entanto, em alguns casos, pode ser necessário adicionar padding ao placeholder para ajustar o posicionamento do texto, como no exemplo acima.

🎓 Para saber mais:

• A propriedade CSS background.
• Documentação da propriedade padding.
• Entendendo o uso de placeholder.

Espero que isso ajude! 🧐

Olá pessoal,

Eu faria da seguinte forma:

.contact__email {
  color: var(--terciary-color);
  border: 1px solid var(--terciary-color);
  border-radius: 24px;
  width: 90%;
  padding: 1em;
  padding-left: 2.5em; /* Valor que empurra o texto para a direita */
}

.contact__email::placeholder {
  font-family: var(--primary-font);
  color: var(--tertiary-color);
  background: url(".../img/email.svg") no-repeat;
  background-position: 20px center; /* Altera para pixels e adiciona o 'center' para o eixo vertical */
  padding-left: 20px; /* Adiciona um padding extra para afastar o placeholder do ícone */
}

O que foi alterado:

background-position: 20px center;: A primeira medida (20px) define a posição horizontal do ícone, empurrando-o para a direita e a segunda medida (center) alinha o ícone verticalmente.

padding-left: 20px;: Adicionamos um padding-left ao placeholder para afastá-lo do ícone, evitando a sobreposição do texto.

Com essas alterações, o ícone ficará bem posicionado dentro do input, sem ser sobreposto pelo texto.

Pessoal, infelizmente nenhum dos dois exemplos funciona aqui pra mim.. Os dois continuaram aparecendo da mesma forma que o que eu mandei na pergunta original. Estou começando a questionar se tem algo errado com o resto do código que está causando isso. Vou adicionar um link ao repositório para ver se alguém consegue me ajudar.
https://github.com/NickHCorrea/HTML-e-CSS/tree/main/Curso%201/AluraBooks

Nick,

Adicione uma linha no:

.contact__email::placeholder{   
    font-family: var(--primary-font);
    color: var(--terciary-color);
    background: url("../img/Email.svg") no-repeat;
    background-position: 1em;
    padding-left: 3em; /* Adicione padding-left ao placeholder */
}

Já tentei essa solução Luis, infelizmente não funcionou.. O padding-left no placeholder não tem efeito

Você tem certeza que está salvando o documento após a alteração?

Sim..

Boa noite, pessoal. Eu "consegui" resolver mas não sei dizer o motivo do problema. A resolução foi abrir o site no chrome ao invés de no firefox. Não sei porque isso acontece, já que usei o reset.css esperava que não houvesse diferença entre navegadores.
Também tive esse problema tentando implementar um :hover no mesmo projeto, segundo o chatGPT isso se devia ao uso de '-webkit' que é apenas para Chrome, mas também não tenho certeza.

Irei fechar essa dúvida como solucionada e criar um novo post perguntando sobre a diferença entre navegadores. Obrigado a todos!