Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Estilização e padronização de inputs com ícones

Bom pessoal, já não é a primeira vez que me deparo com essa situação, que é criar inputs em um padrão e adicionar ícones aos mesmos, mesmo sendo inputs de diferentes tipos, text, number, file e etc... já tentei por vários meios e nunca cheguei a uma solução razoável, alguém sabe de algum método ou fonte que eu possa sanar minha duvida? a seguir uma imagem meramente ilustrativa do que me refiro, onde os inputs seriam padronizados e com imagens "dentro" do placeholder, mesmo sendo de tipos distintos, como text, file, date, por exemplo... Agradeço desde já!

sem descrição

1 resposta
solução!

Oi Guilherme, tudo bem?

Entendo sua dificuldade em padronizar e estilizar os inputs com ícones. Uma solução para isso seria utilizar bibliotecas de ícones como o Font Awesome ou o Material Icons, que possuem uma grande variedade de ícones para serem utilizados em seus projetos.

Para adicionar os ícones dentro dos placeholders dos inputs, você pode utilizar a propriedade CSS "background-image" e definir a posição do ícone com "background-position". Além disso, é importante utilizar classes CSS para padronizar a estilização dos inputs.

Segue um exemplo de código utilizando o Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<style>
  .input-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm4.24-9.41l-4.24 4.24-2.12-2.12-1.41 1.41 2.82 2.82 5.65-5.65-1.41-1.41z"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 30px; /* espaço para o ícone */
  }
</style>

<input type="text" placeholder="Nome" class="input-icon">
<input type="number" placeholder="Idade" class="input-icon">
<input type="file" placeholder="Arquivo" class="input-icon">

Nesse exemplo, foi utilizado um ícone de usuário do Font Awesome dentro do placeholder dos inputs. A classe "input-icon" é utilizada para aplicar a estilização nos inputs.

Espero ter ajudado.

Um abraço e bons estudos.