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

[Bug] Placeholder bugado

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Barra de pesquisa

por Thiago Coutinho Vaz
| 58.4k xp | 7 posts

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!
por Noberto Luis Martins Ferreira Filho
| 127.3k xp | 77 posts
Frontend developer

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;** }

por WESLLEY GONÇALVES
| 111.8k xp | 2 posts

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