Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
2
respostas

[Bug] Placeholder bugado

Olá, a Lupa do placeholder apresenta diferentes resultados em navegadores distintos. Deu certo no chrome, mas nem tanto no firefox. Gostaria muuito de resolver essa questão já que isso com certeza me será útil em projetos futuros. Na imagem em anexo no primeiro quadro está o chrome, onde tive o melhor resultado até agora. Desde já agradeço

<input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
.banner__pesquisa::placeholder{
    font-family:var(--fonte-principal);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color:var(--branco);
    background: url("../img/Lupa.svg") no-repeat;
    background-size: 20px;
    background-position: 0em;
}

Ichrome_vs_firefox

2 respostas
solução!

olá, eu encontrei apenas 1 diferença entre nossos códigos. Tenta fazer dessa forma:

obs.: eu testei o código abaixo no Chrome e no Firefox e funcionou em ambos.

.banner__pesquisa::placeholder { font-family: var(--fonte-principal); font-size: 14px; font-weight: 400; text-align: center; color: var(--branco); background: url("../img/Lupa.svg") no-repeat; ** background-position: 1em;** }

Fala meu nobre,

Faça assim, baixe o conteudo completo com o zip de todos os arquivos usados no curso, la em vez de "Lupa.svg" tera um arquivo SVG "Pesquisa.svg" ficando assim:

.banner__pesquisa::placeholder { font-family: var(--fonte-principal); font-size: 14px; font-weight: 400; text-align: center; color: var(--branco); background: url("../img/Pesquisa.svg") no-repeat;}