Skip to content

Latest commit

 

History

History
34 lines (22 loc) · 992 Bytes

desafio-bonus-1.md

File metadata and controls

34 lines (22 loc) · 992 Bytes

BONUS

Se você completou os 12 desáfios, você merece demais esse bonus.

Estudo e dedicação sempre merecem!

Input com Icone

Parece simples não é?

E ainda assim vemos que a maioria das bibliotecas tem uma abordagem diferente para isso, ou senão colocam bordas/fundos/destaques nos icones que por muitas vezes, nos so queremos adicionar ao input.

É isso que vamos fazer Nesse desafio você trabalhará com

  • Pseudo Classes/Seletores
  • position
  • padding

Regras

Só pode ser usado HTML e CSS

Requisitos

É necessaŕio que:

  • O input tenha um icone, pode ser a direita ou a esquerda a escolha é sua
  • A biblioteca de icones também é sua escolha

Se quiser ainda 'temperar' mais se desafio você pode:

  • Trocar a cor do icone quando o input estiver em foco ou

  • Exibir/Esconder exibir o icone somente em um estado, com foco ou sem

    Você pode visualizar o modelo que eu fiz no CodePen