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

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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} 

:-)

Answer 4

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

Answer 5

je devais faire tout le suivi de supprimer complètement

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

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

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

Answer 8

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

Cela devrait faire l'affaire.