Supprimer la lueur des entrées de texte et des zones de texte dans Safari/Chrome

Question

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 / une zone de texte à l'aide de CSS ?

Answer 1

Editer (11 ans plus tard) : Ne faites pas cela à moins que vous ne fournissiez une solution de repli pour indiquer quel élément est actif. Sinon, cela nuit à l'accessibilité car cela supprime essentiellement l'indication montrant quel élément d'un document a le focus. Imaginez que vous soyez un utilisateur de clavier et que vous ne sachiez pas vraiment avec quel élément vous pouvez interagir. L'accessibilité doit l'emporter sur l'esthétique.

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

Toutefois, il a été avancé que le fait de conserver la lueur/le contour est en fait bénéfique pour l'accessibilité, car il peut aider les utilisateurs à voir quel élément est actuellement focalisé.

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

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

Answer 2

Cet effet peut également se produire sur des éléments qui ne sont pas des entrées. J'ai trouvé une solution plus générale qui fonctionne comme suit

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

---

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

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

Answer 3

Sur le redimensionnement des zones de texte dans les navigateurs basés sur webkit :

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

resize: none;

(et oui, je suis d'accord avec "essayer d'éviter de faire quoi que ce soit qui brise les attentes de l'utilisateur", mais parfois cela a du sens, par exemple dans le contexte d'une application web).

Pour personnaliser l'aspect et la convivialité des éléments de formulaire webkit à partir de zéro :

-webkit-appearance: none;

Answer 4

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

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

Answer 5

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