Comment puis-je supprimer la surbrillance du focus par défaut des éléments d'entrée tout en conservant l'accessibilité ?

Suppression de la surbrillance de la bordure des éléments d'entrée

Lorsque les éléments HTML sont mis en évidence dans les navigateurs Web comme Safari et Chrome, une bordure bleue peut apparaître autour d'eux. Cela peut être gênant et visuellement peu attrayant dans certaines conceptions.

Concentrez-vous sur l'accessibilité

Avant de supprimer la surbrillance du focus, réfléchissez à ses implications en matière d'accessibilité. Il fournit une indication visuelle de l'élément actuellement actif, ce qui est crucial pour les utilisateurs qui s'appuient sur des repères visuels. Par conséquent, il est préférable d'explorer d'autres moyens de rendre le focus visible.

Solution CSS

Pour supprimer le contour du focus spécifiquement d'un élément d'entrée avec la classe "middle":

input.middle:focus {
    outline-width: 0;
}

Solution globale pour les éléments de formulaire

Pour supprimer le contour de tous Éléments de formulaire de base :

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

Prise en charge des éléments modifiables par le contenu (CSS3)

Noah Whitmore a suggéré d'étendre la solution pour inclure des éléments avec l'attribut "contenteditable" :

[contenteditable="true"]:focus {
    outline: none;
}

Désactiver le contour sur tous les éléments (pas Recommandé)

Bien que cela ne soit pas recommandé, vous pouvez désactiver le contour du focus globalement en utilisant :

*:focus {
    outline: none;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!