Comment réinitialiser/supprimer la mise en surbrillance/la mise au point de la bordure chromée?


282

J'ai vu que le chrome met une bordure plus épaisse sur :focus, mais il ressemble un peu dans mon cas où j'ai utilisé border-radius aussi. Y at-il de toute façon pour enlever cela?

image: chrome :focus border

+1

MEILLEURE RÉPONSE: http: // stackoverflow.com/a/17526407/877860 (vous devez vous débarrasser de la boîte-ombre aussi) 12 nov.. 162016-11-12 05:34:48

566

Vous devriez être en mesure de le retirer à l'aide

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 sélectionné, ce qui peut aspirer lorsque vous parcourez tous les éléments d'une forme à l'aide de la touche Tab - vous devez réfléchir d'une manière ou d'une autre lorsqu'un élément est mis au point.

+5

j'ai changé les propriétés/attributs 'background-color' et' color' (quel que soit l'appel) sur ': focus' donc je devinez c'est encore ok 31 mai. 102010-05-31 13:09:05

+7

Yep. Définir globalement «outline: none» comme certaines réinitialisations est une erreur car elle dégrade l'accessibilité du clavier, mais il est bien d'enlever «outline» si vous avez une autre façon claire de refléter la focalisation. 31 mai. 102010-05-31 13:23:13

+12

+1 sur la note pour cela étant une très mauvaise pratique. Cela rendrait l'utilisation du clavier très ennuyante. 26 juil.. 122012-07-26 15:39:45

+12

C'est une idée horrible de la part de Chrome, mais il est facile de l'éteindre. Bien sûr, c'est une mauvaise pratique si vous ne faites pas autre chose pour montrer votre concentration, mais qui va faire quelque chose d'idiot? Il sera beau sur 1% des sites ces jours-ci, puisque tout le monde fait tout sur mesure. L'utilisation de contrôles "standard" est une chose du passé. 13 déc.. 122012-12-13 20:04:38

  0

Mais pour un menu de navigation mobile basé sur une liste déroulante 'select', c'est une très bonne pratique. 12 févr.. 172017-02-12 09:54:04


7

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


76

Pour supprimer la mise au point par défaut, utilisez ce qui suit dans votre fichier Css par défaut:

:focus {outline:none;} 

Vous pouvez alors contrôler la couleur de la bordure de mise au point individuellement par élément, ou dans le Css par défaut:

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

Remplacez évidemment red avec le code hexadécimal que vous avez choisi.

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

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

:-)


17

Cela va certainement travailler. contour orange ne sera pas affiché plus .. commun pour tous les tags:

*:focus { 
    outline: none; 
    } 

spécifique à une étiquette, ex: balise d'entrée

input:focus{ 
    outline:none; 
    } 

86

je devais faire tout le suivi de supprimer complètement

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

Cela devrait être la meilleure réponse, c'est la seule qui supprime complètement l'ombre/bordure sur le focus. 11 juil.. 142014-07-11 22:04:52

+2

La seule solution qui fonctionne 28 déc.. 142014-12-28 02:33:45

+1

enfin j'en ai trouvé un qui fonctionne sur mobile! 02 avril. 152015-04-02 10:30:35

+1

J'ai essayé pas mal d'autres choses, mais c'est la seule qui a fonctionné. 26 mai. 162016-05-26 21:44:37

+1

Ceci est celui qui a seulement fonctionné pour moi 08 juin. 162016-06-08 13:07:22

  0

Cette réponse obtient le plus proche, mais laisse toujours un contour/ombre gris autour du bord supérieur de la boîte d'entrée. Pour m'en débarrasser, j'ai dû ajouter un «fond: blanc». 12 avril. 172017-04-12 00:47:40

+1

Merci, a travaillé pour moi! 04 août. 172017-08-04 05:31:14


6

Problème lorsque vous avez déjà un contour. Chrome change encore quelque chose et c'est une vraie douleur. Je ne peux pas trouver ce qu'il faut 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; 
} 

No focus With focus


7

La manière simpliest est d'utiliser quelque chose comme cela, mais notez qu'il peut ne pas être bon.

input { 
    outline: none; 
} 

J'espère que vous trouverez cela utile.


12
border:0; 
outline:none; 
box-shadow:none; 

Cela devrait faire l'affaire.