Comment puis-je supprimer la surbrillance du focus d'entrée par défaut dans différents navigateurs ?

Suppression de la surbrillance du texte de saisie par défaut

De nombreux navigateurs, dont Safari et Chrome, ajoutent automatiquement une bordure bleue autour des éléments de saisie ciblés. Cela peut constituer une distraction visuelle, notamment dans certaines mises en page. Bien que certains navigateurs permettent de contrôler ce comportement, trouver une solution qui fonctionne sur différents navigateurs peut s'avérer difficile.

Heureusement, CSS offre une solution à ce problème. En utilisant la propriété outline-width, vous pouvez supprimer le contour du focus des éléments d’entrée. Voici un exemple :

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

Cet extrait cible l'élément d'entrée avec la classe « middle » et élimine le contour du focus. Vous pouvez également utiliser la propriété outline pour obtenir le même effet pour tous les éléments de base du formulaire :

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

Pour gérer les éléments avec l'attribut contenteditable, qui en fait effectivement un type d'élément d'entrée, utilisez cette règle CSS :

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

En dernier recours, vous pouvez désactiver le contour du focus sur tous les éléments avec le sélecteur de caractères génériques :

*:focus {
    outline: none;
}

Rappelez-vous, la désactivation du plan de focus peut affecter l'accessibilité et la convivialité de votre site Web, car les utilisateurs s'en servent pour identifier l'élément actuellement ciblé. Envisagez des méthodes alternatives pour rendre le focus visible lors de la suppression de la surbrillance par défaut.

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!