Supprimer Safari / Chrome textinput / textarea glow

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?

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/

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;
}

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;

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.

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

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.

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;
}

Cette solution a fonctionné pour moi.

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

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;
}

<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>

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;}

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.

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;   
   }