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


137

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">


se ve bien en mi navegador mozilla
Drixson Oseña

1
Se supone que el rectángulo de enfoque ayuda al usuario a observar que el clic fue efectivo y, por lo tanto, evita que haga clic accidentalmente dos veces. Entonces, ¿estás seguro de que estás resolviendo un problema y no estás creando uno?
Jukka K. Korpela

Respuestas:


192

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>

19
En Chrome, tuve que agregar una outline: none;regla en input[type="button"]:focuslugar de input[type="button"].
Sung Cho

@SungCho: Gracias. Tu método me ayudó.
priyamtheone

75

Contornos de enfoque en Chrome y FF

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

remoto:

ingrese la descripción de la imagen aquí

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 */
}

54

Funciona para mí simplemente :)

*:focus {
    outline: 0 !important;
}

1
Esta es la única respuesta que me funcionó, pero ¿cómo lo harías sin eso? Muchas fuentes me han dicho que solo debe usarlo si es absolutamente necesario.
Jay

Hice este estilo de botón para toda la aplicación en CSS externo. Si quiere ignorarlo, puede hacerlo con #id en css usando eso en cada botón: # button-tyle {outline: 0; } o use el mismo estilo para todos los botones sin #id en cada botón, aquí hay un enlace de demostración : input [type = "button"] {width: 70px; altura: 30px; margen izquierdo: 72 px; margen superior: 15px; bloqueo de pantalla; color de fondo: gris; color blanco; borde: ninguno; esquema: 0; }
X-Coder

19

Este me funcionó

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

14

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


4

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


3

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


3

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

3

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.


2

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.


2

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.


2

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;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.