Parent : [[INDEX-WEB-UIUX]]

Web UI/UX - Search Bar Focus Glow : icon inside input, accent border + glow shadow, smooth transition

Problème

Un input de recherche standard est invisible dans un design dark. Une IA le rend trop petit, sans feedback de focus, ou avec une loupe mal positionnée.

Solution

Search bar avec : loupe icon positionnée en absolute à gauche, padding-left pour l'espace, focus avec border accent + glow shadow box-shadow, transition smooth.

<form onSubmit={handleSearch} className="max-w-2xl mx-auto flex gap-2">
  <div className="relative flex-1">
    {/* Icon inside input */}
    <span
      className="absolute left-3.5 top-1/2 -translate-y-1/2 text-sm select-none"
      style={{ color: 'var(--text-3)' }}
    >
      ⌕
    </span>

    <input
      value={pendingQuery}
      onChange={(e) => setPendingQuery(e.target.value)}
      placeholder="Rechercher un script, MLO, véhicule…"
      className="w-full pl-9 pr-4 py-3 rounded-[4px] text-sm outline-none transition-all"
      style={{
        background: 'var(--surface)',
        border: '1px solid var(--border)',
        color: 'var(--text)',
      }}
      onFocus={(e) => {
        e.currentTarget.style.borderColor = 'var(--accent)'
        e.currentTarget.style.boxShadow = '0 0 0 3px rgba(229,25,26,0.10)'
      }}
      onBlur={(e) => {
        e.currentTarget.style.borderColor = 'var(--border)'
        e.currentTarget.style.boxShadow = 'none'
      }}
    />
  </div>

  <button type="submit" disabled={loading} className="btn-primary px-7">
    {loading ? (
      <span className="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
    ) : 'Rechercher'}
  </button>
</form>

Points clés

1. Icon absolute left-3.5 top-1/2 -translate-y-1/2 : parfaitement centré verticalement
2. pl-9 : padding-left de 36px = espace pour la loupe + marge
3. select-none sur l'icon : évite la sélection de texte accidentelle
4. Focus glow : box-shadow: 0 0 0 3px rgba(229,25,26,0.10) → halo accent doux
5. transition-all : la border et le shadow changent en douceur
6. Spinner CSS pur : border-2 border-white/30 border-t-white rounded-full animate-spin → pas de lib
7. Placeholder descriptif : "Rechercher un script, MLO, véhicule…" pas juste "Search..."

Pourquoi

• La loupe inside input économise l'espace
• Le focus glow attire l'attention sans agressivité
• Le spinner CSS pur = zéro dépendance

Quand l'utiliser

• Barre de recherche principale, filtres avancés
• Tout input qui est le CTA principal de la page

Quand NE PAS l'utiliser

• Input de formulaire standard (focus ring classique suffit)
• Input dans une table (trop grand)

Références

• ProjectAlpha/GlobalSearch.tsx L275-293