google-chrome - google - eliminar extensiones chrome android

Botón Bootstrap: eliminar esquema en Chrome OS X

Question

Estoy buscando lograr esto: http://getbootstrap.com/javascript/#popovers-examples - desplácese hasta "Demo en vivo" y presione el botón rojo de popover, en Chrome en OS X ... Es perfecto, hermoso

Ahora ve aquí (el niño problema): http://yoyo.io/javascript/#popovers - delinea azul, aaaargh.

¡Si inspeccionas verás una letanía de esfuerzos de CSS de mi parte para eliminar esto! ¡Parece correcto en Safari y Firefox pero no en Chrome!

Alguien - ¿qué estoy pasando por alto?

¡Muchas gracias de antemano!

Answer 1

Buscar y reemplazar

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

Reemplazar a

outline: 0;

Answer 2

Con scss:

$btn-focus-box-shadow: none!important;

Answer 3

En bootstrap 4 ya no se usa el contorno, sino la sombra de caja. Si es tu caso, solo haz lo siguiente:

.btn:focus {
    box-shadow: none;
}

Answer 4

En los mixins de los archivos Sass de las fuentes de Bootstrap, elimine todas $border referencias $border (no en la variante de esquema).

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);    
  color: $color;
  background-color: $background;
  //border-color: $border;
  @include box-shadow($btn-box-shadow);
  [...]
}

O simplemente codifica tu propio _customButton.scss mixin.

Answer 5

Ese CSS va desde este archivo "tab-focus.less" en la carpeta mixins (podría ser difícil de encontrar, porque las mezclas no se muestran en las herramientas chrome-dev). Entonces deberías editar esto:

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

Answer 6

Esto lo eliminará: corto y limpio:

.btn {
    outline: none !important;
}

Answer 7

La solución más simple es: crea un archivo CSS y escribe esto:

.btn:focus, .btn:active:focus, .btn.active:focus {
    box-shadow: none !important;
}

Answer 8

Para cualquier googlers como yo, donde ...

.btn:focus {
    outline: none;
}

Todavía no funcionaba en Google Chrome, lo siguiente debería eliminar por completo cualquier brillo de botón.

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}

Answer 9

puedes poner esta etiqueta en tu html.

<button class=''btn btn-primary'' onfocus=''this.blur''>
     Button Text
</button>

Utilicé el foco porque onclick aún mostraba el brillo durante un microsegundo e hizo un destello horrible en términos de usarlo. Esto pareció deshacerse después de que fallaran todos los métodos de CSS.

Answer 10

.btn.active o .btn.focus solo no pueden anular los estilos de Bootstrap. Para el tema predeterminado:

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
      outline: none;
}

Answer 11

Veo .btn:focus tiene un outline en él:

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Intenta cambiar esto a:

.btn:focus {
  outline: none;
}

Básicamente, busque cualquier instancia de outline en :focus elementos :focus : eso es lo que lo está causando.

Answer 12

.btn:focus, .btn:active:focus, .btn.active:focus{
    outline:none;
    box-shadow:none;
}

Esto debería eliminar el contorno y la sombra de la caja