html - style - title attribute anchor tag

Esquema no deseado o borde alrededor del botón cuando se hace clic

Question

Tengo un botón de estilo en mi sitio web. Pero cuando hago clic en él, crea un borde o contorno no deseado (no sé cuál). ¿Cómo puedo eliminar ese borde? A continuación se muestra todo el código que pertenece al botón.

button {
    border: hidden;
    cursor: pointer;
    outline: none;
}

<button>this is my button</button>

Answer 1

Es un esquema. Utilizar outline:none; en: enfocar pseudo-clase para eliminarlo. Funciono bien para mi

Answer 2

No elimine los esquemas de los estilos de enfoque, esto hace que su sitio sea menos accesible para los usuarios que solo tienen teclado y los que tienen poca visión.

Si elige agregar algo como :focus { outline: none; } :focus { outline: none; } a sus hojas de estilo, también agregue que posee estilos para elementos enfocados.

Lectura: Nunca elimines los esquemas CSS

Answer 3

Si estás hablando de la línea de puntos en Firefox, creo que lo que estás buscando es esto:

button::-moz-focus-inner { border: 0; }

Este es un hilo sobre el tema: ¿Cómo eliminar el contorno de puntos de Firefox en los BOTONES, así como los enlaces?

Answer 4

Utilice cualquiera de estos estilos CSS

a:active, a:focus,input, input:active, input:focus{     outline: 0;     outline-style:none;     outline-width:0; }  
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{     border: none; } 

O

:focus {outline:none;} ::-moz-focus-inner {border:0;}

Una vez que haya finalizado la parte de estilo CSS, es posible que también deba configurar el emulador de IE. Actualice sus aplicaciones web, el archivo web.config e incluya la siguiente clave.

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>

Answer 5

outline: none;

Esto me funcionó en Chrome.