web-dev-qa-db-fra.com

Supprimer Safari / Chrome textinput / textarea lueur

Je me demande s'il est possible de supprimer la lueur bleue et jaune par défaut lorsque je clique sur une zone de saisie de texte/texte à l'aide de CSS?

csscross-browser
320
Alec Smart
textarea, select, input, button { outline: none; }

Cependant, il a été avancé que le maintien de la lueur/du contour est réellement bénéfique pour l'accessibilité, car cela peut aider les utilisateurs à voir quel élément est actuellement ciblé.

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

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

594
ajm

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

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

Mise à jour: Il se peut que vous n’ayez pas à utiliser le sélecteur :focus. Si vous avez un élément, dites <div id="mydiv">stuff</div>, et vous obtenez la lueur extérieure sur cet élément div, appliquez-le comme d'habitude:

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

Redimensionnement de textarea dans les navigateurs Webkit:

Le réglage de hauteur maximale et largeur maximale sur la zone de texte ne supprime pas la poignée de redimensionnement visuel. Essayer:

resize: none;

(et oui, je suis d’accord avec "essayer de ne rien faire qui brise les attentes de l’utilisateur", mais cela a parfois un sens, c’est-à-dire dans le contexte d’une application Web)

Pour personnaliser l'apparence des éléments de formulaire webkit à partir de zéro:

-webkit-appearance: none;
13
Thomas Maas

Carl W :

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

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

Je vais expliquer ceci:

  • :focus signifie qu'il met en forme les éléments sélectionnés. Nous appelons donc les éléments en discussion.
  • outline-color: transparent; signifie que la lueur bleue est transparente.
  • outline-style: none; fait la même chose.
5
MineCMD

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

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

Ceci désactive la mise en surbrillance du bouton par défaut dans les navigateurs webkit mobiles

4
Michael

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

Veuillez ne pas utiliser outline:none; pour désactiver le plan de focus. Si vous faites cela, vous tuez l'accessibilité du Web. Il existe un moyen accessible de le faire.

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

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

4
Wim Mostmans

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;
}
2
Kyle S

parfois, il arrive des boutons aussi utiliser ensuite 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;
}
1
vamsikrishnamannem

J'ai trouvé utile de supprimer le contour d'un bouton de saisie du type "porte coulissante", car le contour ne recouvre pas le "capuchon" correct de l'image de la porte coulissante, ce qui rend l'état de la mise au point un peu confus.

input.slidingdoorbutton:focus { outline: none;}
0
richfinelli

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;   
   }
0
Santosh Khalse
<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
criss_ae

J'avais juste besoin de supprimer cet effet de mes champs de saisie de texte et je ne pouvais pas faire en sorte que les autres techniques fonctionnent 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
Martyn Shutt