Olá, Luiz! Tudo bem com você?
Acredito que o problema possa ser resolvido com algumas alterações no CSS. Primeiramente, o flexbox não funciona no placeholder, então essa abordagem não vai funcionar. No entanto, podemos tentar uma solução alternativa.
Você mencionou que a lupa e o texto não estão centralizados e que a lupa fica sobre o texto quando visualizada em um dispositivo móvel. Isso pode ser devido à maneira como o background está configurado. No código do curso, a lupa é adicionada como um background do input.
Para evitar que a lupa fique sobre o texto, você pode adicionar um padding à esquerda no input. Isso vai "empurrar" o texto para a direita, evitando que ele fique sobre a lupa. Por exemplo:
.banner__pesquisa {
padding-left: 30px; /* Ajuste o valor conforme necessário */
}
Além disso, para garantir que a lupa e o texto estejam centralizados, você pode tentar ajustar a propriedade background-position. No código do curso, a lupa é posicionada com background-position: 1em;, mas você pode precisar ajustar esse valor para obter o alinhamento desejado. Por exemplo:
.banner__pesquisa {
background-position: 10px 50%; /* Ajuste o valor conforme necessário */
}
Essa propriedade aceita dois valores: o primeiro é para a posição horizontal (esquerda/direita) e o segundo é para a posição vertical (cima/baixo). No exemplo acima, a lupa será posicionada 10px à direita do lado esquerdo do input, e no meio verticalmente.
Espero que essas sugestões possam te ajudar a resolver o problema. Lembre-se de ajustar os valores conforme necessário para obter o resultado desejado.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.
