Je dois, mais je ne peux pas, supprimer la bordure en pointillé blanc autour du texte d'un bouton ciblé.
Après avoir lu des articles sur "supprimer la bordure blanche (en particulier la bordure pointillée autour du lien? Et les liens à l'intérieur), j'ai essayé plusieurs solutions de désactivation du contour comme "outline: 0; ou outline: none; , en utilisant ou pas !important .
Mais rien ne supprime la bordure blanche en pointillé autour du texte d'un bouton focalisé. Voici mon code de page de test le plus simple. Je ne peux pas afficher de capture d'écran, car cela supprime le focus du bouton.
<button type="button">TEST</button>
button {
font-size: 87.5%;
font-family: "ubuntu", Sans-serif;
padding: 0 16px;
min-width: 64px;
height: 36px;
cursor: pointer;
background-color: royalblue;
color: white;
border: 0;
}
button:focus,
button:active {
outline: none;
outline: 0;
outline: none !important;
outline: 0 !important;
}En utilisant Firefox 67.0.3 sur Ubuntu 18.04 (Bionic Beaver), cette page affiche toujours une bordure blanche en pointillé autour du texte du bouton focalisé, que je voudrais supprimer (je vais montrer le focus avec une méthode de ma part).
4 Réponses :
Ces styles sont déclarés au niveau UA, donc chaque navigateur a sa propre implémentation (et dans le cas de Firefox, des pseudo éléments pour les cibler).
Dans Firefox, vous pouvez utiliser le pseudo élément ::-moz-focus-inner :
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
}
Autre information utile: dans IE6, la ligne pointillée ne peut être supprimée que si cette balise meta est ajoutée <meta http-equiv="X-UA-Compatible" content="IE=9" />
Merci Adrift, il fait parfaitement le travail. A cause de "-moz-", je suppose que "focus-inner" est une propriété mozilla uniquement. Où pourrais-je obtenir des informations similaires pour les autres principaux navigateurs (IE, Chrome (Chromium), Opera, Safar
@adrift: le plus drôle est que même les documents Web mdm (aka mozilla devs docs) ne connaissent pas le pseudo sélecteur ":: - moz-focus-inner" ...
@adrift, pour mon bouton, button :: - moz-focus-inner fonctionne seul mais input [type = "button"] :: - moz-focus-inner ne le fait pas.
Il suffit de définir la bordure: 0, j'ai mis à jour votre code, essayez cela, cela fonctionnera!
input[type="button"]::-moz-focus-inner {
border: 0
}
Et dans la balise de style, utilisez simplement ceci: -
<input type="button" value="text">
Merci Ronack, j'ai installé ceci et cela fonctionne. Malheureusement, mes pages devraient être en ligne le lendemain ... Où pourrais-je obtenir les mêmes informations pour les autres principaux navigateurs (IE, Chrome (Chromium), Opera, Safari, ...)?
Merci Kiranvj, j'utilise encore prefixFree, le but de la sorcière est le même.
Comment puis-je vérifier que ":: - webkit-focus-inner" et ":: - o-focus-inner" et ainsi de suite, auront la même influence dans les autres navigateurs?
Vous devez ajouter un recul pour différents navigateurs, par exemple:
button:focus,
button:active {
-moz-outline: 0;
-ms-outline:0;
-o-outline: 0;
-webkit-outline: 0;
}
Ce sont les propriétés préfixées par le fournisseur proposées par les moteurs de rendu appropriés (-webkit pour Chrome, Safari; -moz pour Firefox, -o pour Opera, -ms pour Internet Explorer). Ils sont généralement utilisés pour implémenter des fonctionnalités CSS nouvelles ou propriétaires, avant la clarification / définition finale par le W3.
a::-moz-focus-inner ne fonctionnait pas pour moi dans une situation où une redirection de React Router causait inexplicablement des frontières de focus. Le sélecteur lui-même ne s'est pas activé.
Résolu temporairement avec (mais pas satisfait):
a::-moz-focusring {
outline: none;
}