Cómo quitar el borde del contorno del botón de entrada

cuando hace clic en otro lugar, el borde desaparece, intente enfocar ninguno, pero no ayudó, ¿cómo hacer que el borde del botón feo desaparezca al hacer clic?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

utilizando esquema: ninguno; podemos eliminar ese borde en cromo

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Contornos de enfoque en Chrome y FF

remoto:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

Manifestación

Accesibilidad (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Funciona para mí simplemente :)

*:focus {
    outline: 0 !important;
}

Este me funcionó

button:focus {
    border: none;
    outline: none;
}

La outlinepropiedad es lo que necesitas. Es una forma abreviada de configurar cada una de las siguientes propiedades en una sola declaración:

• outline-style
• outline-width
• outline-color

Puede usar outline: none;, lo que se sugiere en la respuesta aceptada. También podría ser más específico si quisiera:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

agregar !importantsi se usa en Bootstrap

Para evitar el problema causado cuando cambia la propiedad de contorno en un foco, debe dar un efecto visual cuando la pestaña de usuario en el botón de entrada o haga clic en él.

En este caso es un tipo de envío, pero también puede aplicar a un tipo = "botón".

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Es muy simple de lo que piensas. Cuando el botón está enfocado, aplique la outlinepropiedad, así:

button:focus {
    outline: 0 !important;
}

Pero cuando uso el nonevalor, no funciona para mí.

La eliminación de eventos accesibles para el asesor no es una buena idea en desarrollos web estándar. De cualquier manera, si busca una solución, eliminar solo el contorno no resuelve el problema. También debe eliminar la sombra de color azul. para escenarios específicos, use un nombre de clase separado para aislar este estilo especial en su botón.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Mejor haz esto

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Conjunto tanto el outliney las box-shadowpropiedades del botón para noney hacer que importante .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

La razón para establecer los valores en importante es que, si está utilizando otras bibliotecas o marcos CSS como Bootstrap, podría anularse.

Eliminar el esquema es una pesadilla de accesibilidad. Las personas que usan los teclados nunca sabrán en qué elemento están.

Es mejor dejarlo, ya que la mayoría de los botones en los que ha hecho clic lo llevarán a algún lado de todos modos, o si TIENE que eliminar el contorno, aíslelo con un nombre de clase específico.

.no-outline {
  outline: none;
}

Luego puede aplicar esa clase cuando lo necesite.

Dado el html a continuación:

<button class="btn-without-border"> Submit </button>

En el estilo CSS, haga lo siguiente:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Este código eliminará el borde del botón y deshabilitará el foco del borde del botón cuando se haga clic en el botón.

Como muchos otros han mencionado, selector:focus {outline: none;}eliminará ese borde, pero ese borde es una característica clave de accesibilidad que permite a los usuarios del teclado encontrar el botón y no debe eliminarse.

Como su preocupación parece ser estética, debe saber que puede cambiar el color, el estilo y el ancho del contorno, para que se adapte mejor al estilo de su sitio.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Taquigrafía:

selector:focus {
  outline: 1px dashed red;
}