Comment puis-je supprimer la bordure de focus des éléments de texte saisis dans Safari et Chrome ?

Élimination de la bordure de focus des éléments de texte de saisie

Lorsque les éléments de texte de saisie obtiennent le focus, certains navigateurs, notamment Safari et Chrome, peuvent afficher une bordure bleue autour d'eux. Bien que ce repère visuel puisse être utile pour l'accessibilité et la convivialité, il n'est pas toujours souhaitable dans des mises en page de conception spécifiques.

Pour supprimer cette surbrillance de bordure dans Safari, utilisez CSS :

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

Ceci le ciblage vous permet d'isoler l'élément d'entrée souhaité avec la classe "milieu". Alternativement, pour affecter tous les éléments du formulaire, utilisez :

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

Noah Whitmore suggère d'étendre cela aux éléments modifiables :

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

En fin de compte, vous pouvez également désactiver les contours de focus sur tous les éléments avec :

*:focus {
    outline: none;
}

Cependant, cette approche est déconseillée pour des raisons d'accessibilité. N'oubliez pas que le plan de focus sert d'indicateur utile pour les utilisateurs qui naviguent dans l'interface.

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!