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

[Bug] Background do Placeholder não aparece

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

por Suellen Xavier
| 151.8k xp | 142 posts

A imagem da lupa no placeholder não aparece

  <section class="banner">
            <h2 class="banner__titulo">Já sabe por onde começar?</h2>
            <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
            <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
        </section>
.banner__pesquisa:placeholder{
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    background: url("../img/Lupa.svg") no-repeat;
}
4 respostas
por Estudante
| 177.1k xp | 195 posts

Boa tarde Suellen, Verifique se você salvou a imagem no mesmo destino, dentro da pasta img e também se você salvou com o mesmo nome que está declarando na url(....Lupa.svg).

por Suellen Xavier
| 151.8k xp | 142 posts

Bom dia, salvei sim!

por Suellen Xavier
| 151.8k xp | 142 posts
.banner__pesquisa{
    text-align: center;
    background-color: transparent;
    border: 1px solid var(--branco);
    color: var(--branco);
    border-radius: 24px;
    margin: 1.5em 0;
    padding: 1em;
    width: 60%;
    background: url("../img/Lupa.svg") no-repeat;
}
.banner__pesquisa:placeholder{
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--branco);

}

coloqei o background fora do placeholder e apareceu, mas não alinhado

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Suellen Xavier
| 151.8k xp | 142 posts

Encontrei o erro!! na chamada do class faltou uma pontuação ( : )

.banner__pesquisa::placeholder{