Entrar Ainda não tem acesso?
2
respostas

[Sugestão] Customizando o input de pesquisa

Referente ao curso HTML e CSS: responsividade com mobile-first

por Caroline Lopes Pereira Dos Santos
| 14.7k xp | 2 posts

1. QUERO CENTRALIZAR O PLACEHOLDER E A LUPA

Como estava em aula:

print de como o campo de pesquisa estava durante a aula

Como ficou:

print de como estilizei o campo de busca

Código: O que fiz de diferente?

  • adicionei um padding left de 3em ao placeholder;
  • mudei o valor do background-position para 1.8em.
.banner__pesquisa::placeholder {
    font-family: var(--fonte-principal);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    padding-left: 3em;
    color: var(--branco);
    background: url("../img/Lupa.svg") no-repeat;
    background-position: 1.8em;
}

2. QUERO QUE OS ELEMENTOS DENTRO DO CAMPO SUMAM AO CLICAR Fiquei "encucada" de que, ao clicar, o texto do placeholder não sumia imediatamente, então decidi alterar.

Antes:

print de como estava antes

Depois:

print de como ficou depois das alterações

Código: O que acrescentei?

.banner__pesquisa:focus::placeholder {
    color: transparent;
    background: transparent;
 }

O que isso faz?

  • .bannerpesquisa - seleciona a classe do input que queremos mexer;
  • :focus - quando esse input estiver em foco, ou seja, quando ele estiver "clicado"/selecionado;
  • ::placeholder - seleciona a parte que a gente quer que suma quando tiver em focus (é uma pseudo-classe)

Bom, foi isso que eu fiz, eu espero que eu não descubra da pior maneira que algo que fiz quebra a aplicação toda no futuro hahah Aceito sugestões e críticas/melhorias ao código =)

2 respostas
por Rafaela Petelin Silvério
| 786.8k xp | 1765 posts
Alura Scuba Team Monitora de Fórum

Oi, Caroline! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

O jeito como você explicou cada alteração que fez no CSS ficou muito claro! O uso do :focus::placeholder para esconder o texto e a imagem ao focar no input foi uma solução bem pensada para melhorar a experiência de quem digita no campo.

Uma dica interessante para o futuro é usar o text-indent no lugar do padding-left quando você quiser afastar o texto do ícone dentro do input, pois ele lida melhor com centralização visual sem afetar a posição do ícone.


.banner__pesquisa {
    background: url("../img/Lupa.svg") no-repeat 1.8em center;
    text-indent: 3em;
}

Esse código afasta o texto do ícone sem aplicar padding no placeholder, o que pode evitar problemas de alinhamento.

Parabéns pelo comprometimento! Sua dedicação nessa atividade ficou muito evidente, continue assim :)

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Caroline Lopes Pereira Dos Santos
| 14.7k xp | 2 posts

Fico feliz em saber que cheguei em uma boa solução! Muito obrigada pela dica do text-indent :D