Comment réinitialiser / supprimer la bordure de mise en évidence / mise au point du chrome?

J’ai vu que le chrome met une frontière plus épaisse sur :focus mais il me semble que dans mon cas, j’ai aussi utilisé border-radius. Y a-t-il de toute façon pour enlever ça?

image: chrome: focus border

    Vous devriez pouvoir le supprimer en utilisant

     outline: none; 

    mais gardez à l’ esprit c’est potentiellement mauvais pour la facilité d’ utilisation: Il sera difficile de dire si un élément est concentré, ce qui peut aspirer lorsque vous marchez à travers tous les éléments est une forme à l’ aide de la touche Tab – vous devez tenir compte d’une certaine manière quand un élément est sélectionné .

    J’ai dû faire tout le suivi pour le supprimer complètement

     outline-style:none; box-shadow:none; border-color:transparent; 

    Pour supprimer le focus par défaut, utilisez ce qui suit dans votre fichier .css par défaut:

     :focus {outline:none;} 

    Vous pouvez ensuite contrôler la couleur de la bordure de focus soit individuellement par élément, soit par défaut .css:

     :focus {outline:none;border:1px solid red} 

    Évidemment, remplacez le red par le code hexadécimal choisi.

    Vous pouvez également laisser la bordure intacte et contrôler la couleur d’arrière-plan (ou l’image) pour mettre en évidence le champ:

     :focus {outline:none;background-color:red} 

    🙂

    Cela fonctionnera certainement. Le contour orange n’apparaîtra plus .. Commun pour toutes les balises:

     *:focus { outline: none; } 

    Spécifique à un tag, ex: tag d’entrée

     input:focus{ outline:none; } 
     border:0; outline:none; box-shadow:none; 

    Cela devrait faire l’affaire.

    vous pouvez simplement définir le outline: none; et bordure à une couleur différente sur la mise au point.

    La manière la plus simple est d’utiliser quelque chose comme ça, mais notez que ce n’est peut-être pas si bien.

     input { outline: none; } 

    J’espère que vous trouvez ça utile.

    Le problème est quand vous avez déjà un aperçu. Chrome change toujours quelque chose et c’est une vraie douleur. Je ne peux pas trouver quoi changer:

     .search input { outline: .5em solid black; width:41%; background-color:white; border:none; font-size:1.4em; padding: 0 0.5em 0 0.5em; border-radius:3px; margin:0; height:2em; } .search input:focus, .search input:hover { outline: .5em solid black !important; box-shadow:none; border-color:transparent;; } .search button { border:none; outline: .5em solid black; color:white; font-size:1.4em; padding: 0 0.9em 0 0.9em; border-radius: 3px; margin:0; height:2em; background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE)); background: -webkit-linear-gradient(#4EB4F8, #4198DE); background: -moz-linear-gradient(top, #4EB4F8, #4198DE); background: -ms-linear-gradient(#4EB4F8, #4198DE); background: -o-linear-gradient(#4EB4F8, #4198DE); background: linear-gradient(#4EB4F8, #4198DE); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE'); zoom: 1; } 

    Pas de focusAvec focus