14.12.2024

Usando Pseudo-elementos :before/:after com Input em CSS

Resposta Rápida

Infelizmente, os pseudo-elementos :before ou :after não são adequados para trabalhar com campos de entrada. Uma solução possível é usar um wrapper, como um div:

<div class="input-icon">
  <input type="text" />
</div>

.input-icon::before {
  content: '🔎'; /* Representa um ícone de pesquisa */
  /* Estilize o ícone para se adequar ao seu design */
}

Seu objetivo é estilizar o wrapper .input-icon para criar a ilusão de um verdadeiro campo de entrada.

Conclusão

Um campo de entrada é um elemento HTML específico que pertence à categoria de elementos substituídos e mantém seu conteúdo oculto das influências de estilização direta. Os navegadores diferem na forma como renderizam o elemento input, o que limita nossas opções de personalização. Os pseudo-elementos :before e :after são destinados a interagir com o conteúdo, mas não se aplicam a <input>.

Visualização

Os campos de entrada não aceitam pseudo-elementos como "roupas":

Elemento Não-Input (👕👖): Permite adornos antes (👔) e depois (🧥).

Campo de Entrada (🕴️): Evita mudanças na aparência! Prefere acessórios (🎩).

Pseudo-elementos aplicados ao wrapper do input funcionarão. No entanto, a aplicação direta de pseudo-elementos ao próprio elemento de entrada não é possível.

👕👖::before::after // Para elementos não-input: Sim, por favor!
🕴️❌::before::after // Para campos de entrada: Não, obrigado!

Assim, o elemento input resiste teimosamente à estilização direta.

Recursos Úteis

1. ::before - CSS | MDN — Tudo sobre o pseudo-elemento ::before.
2. ::after - CSS | MDN — Descrição detalhada do pseudo-elemento ::after.
3. ::before / ::after | CSS-Tricks — Um guia para usar ::before e ::after.
4. html - Posso usar o pseudo-elemento before ou after em um campo de entrada? - Stack Overflow — Discussão sobre métodos alternativos para aplicar pseudo-elementos a campos de entrada.
5. O Debate: Precisamos Mesmo do CSS Hoje? | CSS-Tricks — Um artigo sobre a relevância do CSS atualmente.
6. ::before ::after | Can I Use — Informações sobre o suporte para pseudo-elementos ::before e ::after em diferentes navegadores e suas versões.
7. Módulo 4 de Pseudo-elementos CSS — As últimas novidades sobre pseudo-elementos CSS.

Video

Navigation