Comment réinitialiser / supprimer les bordures de surbrillance / mise au point de chrome?

Question

J'ai vu que chrome plaçait une bordure plus épaisse sur :focus, mais il semble bien que, dans mon cas, j'ai également utilisé border-radius. Est-il possible de supprimer cela?

Answer 1

Vous devriez pouvoir l'enlever en utilisant

outline: none;

mais gardez à l’esprit que cela est potentiellement mauvais pour la facilité d’utilisation: il sera difficile de déterminer si un élément est concentré, ce qui peut être nul lorsque vous passez en revue tous les éléments d’un formulaire à l’aide de la Tab clé - vous devriez réfléchir d'une manière ou d'une autre lorsqu'un élément est concentré.

Answer 2

Je devais faire tout ce qui suit pour l'enlever complètement

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

Answer 3

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, individuellement par élément ou dans le fichier .css par défaut:

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

Évidemment, remplacez 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 surbrillance le champ:

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

:-)

Answer 4

Cela fonctionnera certainement. Le contour orange ne sera plus visible. Commun pour toutes les balises:

*:focus {
    outline: none;
   }

Spécifique à certaines balises, ex: balise input

input:focus{
   outline:none;
  }

Answer 5

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

Cela devrait faire l'affaire.

Answer 6

Le moyen le plus simple consiste à utiliser quelque chose comme ceci, mais notez que ce n'est peut-être pas si bon.

input {
  outline: none;
}

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

Answer 7

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

Answer 8

Le problème est quand vous avez déjà un contour. Chrome change toujours quelque chose et c'est vraiment pénible. Je ne trouve pas 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;
}