estilo - quitar focus de un boton css

¿Cómo restablecer/eliminar el resaltado de entrada/borde de enfoque de Chrome?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo eliminar el borde (contorno) alrededor de los cuadros de texto / entrada? (Chrome) [duplicar] 11 respuestas

He visto que el cromo pone un borde más grueso en el :focus pero parece que en mi caso parece que también he usado el radio del borde. ¿Hay alguna forma de eliminar eso?

Answer 1

Deberías poder eliminarlo usando

outline: none;

pero tenga en cuenta que esto es potencialmente malo para la facilidad de uso: será difícil saber si un elemento está enfocado, lo que puede apestar cuando recorre todos los elementos de un formulario con la tecla Tab : debe reflejar de alguna manera cuando un elemento está enfocado.

Answer 2

El problema es cuando ya tienes un esquema. Chrome todavía cambia algo y es un verdadero dolor. No puedo encontrar que cambiar:

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

Esto definitivamente funcionará. El contorno naranja ya no se mostrará ... Común para todas las etiquetas:

*:focus {
    outline: none;
   }

Específico para alguna etiqueta, ej: etiqueta de entrada

input:focus{
   outline:none;
  }

Answer 4

La forma más sencilla es usar algo como esto, pero tenga en cuenta que puede que no sea tan bueno.

input {
  outline: none;
}

Espero que encuentres esto útil.

Answer 5

Para eliminar el enfoque predeterminado, use lo siguiente en su archivo .css predeterminado:

:focus {outline:none;}

A continuación, puede controlar el color del borde de enfoque individualmente por elemento o en el .css predeterminado:

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

Obviamente reemplaza el red con el código hexadecimal elegido.

También puede dejar el borde sin tocar y controlar el color de fondo (o imagen) para resaltar el campo:

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

:-)

Answer 6

Tuve que hacer todo el seguimiento para eliminarlo por completo.

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

Answer 7

usted podría simplemente establecer el outline: none; y el borde a un color diferente en el enfoque.

Answer 8

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

Esto debería funcionar.