Supprimer Safari / Chrome textinput / textarea glow


337

Je me demande s'il est possible de supprimer la lueur bleue et jaune par défaut lorsque je clique sur une entrée de texte / zone de texte en utilisant CSS?


6
@Steve, une autre raison de le désactiver est si vous voulez que l'effet lumineux fonctionne dans tous les navigateurs en utilisant: focus au lieu du style de contour mal pris en charge.
Langdon

90
C'est vraiment ennuyeux quand les gens entament une conversation philosophique pour savoir si quelque chose est la "bonne chose à faire" lorsque la question est technique.
tim

2
Je fais une feuille de calcul en ligne, Steve, donc ce serait approprié pour mon utilisation. Cela dépend, mais si ce n'est qu'un simple formulaire, vous devez laisser le contour tel quel.
william44isme

4
Je pense qu'il est tout à fait correct de le désactiver et de faire un effet de focus personnalisé avec css ...
jusqu'au

De plus, savoir désactiver quelque chose ne signifie pas qu'il est irréversible. Quiconque travaille pour n'importe quel client sait qu'il voudra peut-être voir quelque chose de rendu dans un sens, puis le remettre à la manière d'origine / par défaut. Les enseigner sur l'accessibilité ne changera pas ce désir ni ne rendra personne heureux.
JakeGould

Réponses:


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

Bien qu'il ait été avancé que conserver l'éclat / le contour est en fait bénéfique pour l'accessibilité car il peut aider les utilisateurs à voir quel élément est actuellement ciblé.

Vous pouvez également utiliser le pseudo-élément ': focus' pour cibler uniquement les entrées lorsque l'utilisateur les a sélectionnées.

Démo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/


2
Parfait, merci beaucoup. Je me demande également, puis-je également supprimer l'option de redimensionnement de la zone de texte (en bas à droite de la zone de texte)?
Alec Smart

3
+1 pour la prudence; veuillez éviter de faire quoi que ce soit qui ne réponde pas aux attentes de l'utilisateur quant aux performances de sa plateforme; vous pouvez en fait nuire à leur productivité et rendre votre site Web plus difficile à utiliser.
Rob

6
Supprimer mon option de redimensionnement de textarea chrome / safari à vos risques et périls! Je le trouve vraiment utile, indispensable même sur certains sites.
JeeBee

5
pour se débarrasser de la poignée de redimensionnement: resize: none;
Daniel

22
box-shadow: aucun;
styks

92

Cet effet peut également se produire sur des éléments non entrants. J'ai trouvé les travaux suivants comme une solution plus générale

:focus {
  outline-color: transparent;
  outline-style: none;
}

Mise à jour: il n'est peut-être pas nécessaire d'utiliser le :focussélecteur. Si vous avez un élément, par exemple <div id="mydiv">stuff</div>, et que vous obteniez la lueur extérieure sur cet élément div, appliquez simplement comme d'habitude:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Cela fonctionne, par exemple pour les <button>éléments, qui ne bénéficient pas particulièrement de l'éclat sur le focus car la plupart du temps vous cliquez dessus de toute façon.
Kasimir

1
La réponse acceptée n'a pas fonctionné pour moi sur Chrome sur OSX. Cette solution a fait l'affaire.
Bart

En utilisant également cette technique, vous pouvez conserver la mise au point, mais redéfinir la valeur du contour pour qu'il soit une couleur unie de votre choix, etc. pour s'adapter au style de votre site si le supprimer complètement n'est pas complètement satisfaisant.
Neil Monroe

1
N'a pas fonctionné pour moi sur la dernière version de chrome45.0.2454.101 m
J86

Cette réponse de @ Carl-W ne doit pas être négligée! - Cela était utile lors de l'utilisation de jQuery pour créer un lien vers une ancre qui était une div. Je rechargeais un iframe dans la div, puis je me rendais manuellement à l'ancre sans recharger. Il ferait défiler la page jusqu'à l'ancre, mais toute la div avait une lueur extérieure bleue. Ajout de ce CSS sur l'élément div, et cela a fonctionné! - NOTE: je ne l'ai pas utilisé :focuspour le sélecteur, je mets juste le outline-coloret outline-stylesur le css de ma div.
Wade

13

Sur le redimensionnement de la zone de texte dans les navigateurs Webkit:

La définition de max-height et max-width sur la zone de texte ne supprimera pas la poignée de redimensionnement visuel. Essayer:

resize: none;

(et oui, je suis d'accord avec "essayez d'éviter de faire quoi que ce soit qui brise les attentes de l'utilisateur", mais parfois cela a du sens, c'est-à-dire dans le contexte d'une application web)

Pour personnaliser l'aspect et la convivialité des éléments de formulaire de kit Web:

-webkit-appearance: none;

3
Il est également possible de permettre le redimensionnement dans une seule direction, qui peut fixer son interaction avec des mises en page sans désactiver complètement: les valeurs possibles pour Resize sont none, both, horizontal, verticalet inherit.
Boann

J'aime la solution proposée ici avec '-webkit-apparence: none;' - supprime TOUS les styles des éléments d'entrée, vous pouvez donc les styliser à votre guise. Merci!
hanazair

Je ne sais pas pourquoi cela a autant de votes positifs, ce n'est pas du tout une réponse à la question.
paddotk

7

Carl W :

Cet effet peut également se produire sur des éléments non entrants. J'ai trouvé les travaux suivants comme une solution plus générale

:focus {
  outline-color: transparent;
  outline-style: none;
}

Je vais vous l'expliquer:

  • :focussignifie qu'il stylise les éléments mis au point. Nous mettons donc les éléments en évidence.
  • outline-color: transparent; signifie que la lueur bleue est transparente.
  • outline-style: none; fait la même chose.

5

J'ai vécu cela lors d'un divévénement de clic et après 20 recherches, j'ai trouvé cet extrait de code qui m'a sauvé la journée.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Cela désactive la mise en surbrillance des boutons par défaut dans les navigateurs mobiles Webkit


4

C'est la solution pour les personnes qui se soucient de l'accessibilité .

Veuillez ne pas utiliser outline:none;pour désactiver le contour de mise au point. Vous tuez l'accessibilité du Web si vous faites cela. Il existe un moyen accessible de le faire.

Consultez cet article que j'ai écrit pour expliquer comment supprimer la bordure de manière accessible.

L'idée en bref est de ne montrer la bordure du contour que lorsque nous détectons un utilisateur de clavier. Une fois qu'un utilisateur commence à utiliser sa souris, nous désactivons le contour. En conséquence, vous obtenez le meilleur des deux.


2

Si vous souhaitez supprimer la lueur des boutons dans Bootstrap (ce qui n'est pas nécessairement mauvais UX à mon avis), vous aurez besoin du code suivant:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Merci. .btn:active:focusétait nécessaire pour supprimer la lueur tout en maintenant enfoncé le bouton.
homerjam

2

Cette solution a fonctionné pour moi.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

1

parfois, il se produit des boutons, puis utilisez ci-dessous pour supprimer la ligne extérieure

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

0
<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

0

J'ai trouvé utile de supprimer le contour sur un bouton d'entrée de type "porte coulissante", car le contour ne couvre pas le "capuchon" droit de l'image de la porte coulissante, ce qui rend l'état de la mise au point un peu chancelant.

input.slidingdoorbutton:focus { outline: none;}

0

J'avais juste besoin de supprimer cet effet de mes champs de saisie de texte, et je n'ai pas pu faire fonctionner les autres techniques correctement, mais c'est ce qui fonctionne pour moi;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Testé dans Firefox et dans Chrome.


0

Sûr! Vous pouvez également supprimer la bordure bleue de tous les éléments HTML à l'aide de *

*{
    outline-color: transparent;
    outline-style: none;
  }

Et

 *{
     outline: none;   
   }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.