Tool Hub

Testeur Focus Ring

Aperçu du style focus outline · box-shadow

Sélecteur CSS

Clavier uniquement (recommandé)

Cliquez sur un contrôle ou appuyez sur Tab pour voir l'anneau de focus.

CSS
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

Comment utiliser

  1. Ajustez la largeur du contour, le décalage et la couleur à l'aide des entrées numériques et du sélecteur de couleur.
  2. Choisissez le style du contour : solid, dashed ou dotted.
  3. Habilitation facultative de box-shadow et définissez son extension et sa couleur pour un effet de double anneau.
  4. Appuyez sur Tab dans le bouton d'aperçu ou l'entrée pour voir le ring de focus rendu en direct.
  5. Copiez le CSS généré pour l'utiliser dans votre propre feuille de style.

Exemples

  • Définir la largeur à 3px, le décalage à 2px, la couleur à #0066FF, le style solid produit outline: 3px solid #0066FF; outline-offset: 2px; visible sur le bouton d'aperçu lorsqu'il est focalisé.
  • L'activation de box-shadow avec une extension de 4px et une couleur rgba(0,102,255,0.4) ajoute un anneau de lueur douce autour du contour.

Vérifiez les sorties avant utilisation en production. Aucune garantie — voir Conditions.