Cambiar el enfoque de entrada de Bootstrap brillo azul

¿Alguien sabe cómo cambiar Bootstrap input:focus? ¿El brillo azul que aparece cuando haces clic en un inputcampo?

Al final cambié la siguiente entrada css en bootstrap.css

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Puede usar el .form-controlselector para hacer coincidir todas las entradas. Por ejemplo, para cambiar a rojo:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

Póngalo en su archivo css personalizado y cárguelo después de bootstrap.css. Se aplicará a todas las entradas, incluidos textarea, select, etc.

Si está utilizando Bootstrap 3.x, ahora puede cambiar el color con la nueva @input-border-focusvariable.

Ver el commit para más información y advertencias.

En _variables.scss actualizar @input-border-focus.

Para modificar el tamaño / otras partes de este brillo, modifique los mixins / _forms.scss

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}

Puede modificar el .form-control:focus color sin alterar el estilo de arranque de esta manera:

Arreglo rapido

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

Explicación completa

1. Encuentre la versión de bootstrapCDN que está utilizando. Por ejemplo, para mí ahora es 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Busque la clase que desea modificar. Por ejemplo, .form-control:focusy copie los parámetros que desea modificar en su CSS. En este caso es border-colory box-shadow.
3. Elige un color para el border-color. En este caso, elijo elegir el mismo verde que usa el bootstrap para su .btn-successclase, buscando esa clase en particular en la página bootstrap.css mencionada en el paso 1.
4. Convierta el color que eligió a RGB y agréguelo al box-shadowparámetro sin alterar el cuarto parámetro RGBA (0.25) que tiene el bootstrap para la transparencia.

Para la versión beta de Bootstrap v4.0.0, necesitará lo siguiente agregado a una hoja de estilo que anula Bootstrap (agregue después de CDN / enlace local a bootstrap v4.0.0 beta o agregue !importanta los estilos:

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

Reemplace el color del borde y el rgba en el cuadro de sombra con el estilo de color que desee *.

En Bootstrap 4, si compila SASS usted mismo, puede cambiar las siguientes variables para controlar el estilo de la sombra del foco:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

Nota: a partir de Bootstrap 4.1, las variables $input-btn-focus-colory $input-btn-focus-box-shadowse usan solo para elementos de entrada, pero no para botones. La sombra del foco para los botones está codificada como box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, por lo que solo puede controlar el ancho de la sombra a través de la $input-btn-focus-widthvariable.

Estos son los cambios si desea que Chrome muestre el esquema "amarillo" predeterminado de la plataforma.

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    border-color: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

Para deshabilitar el brillo azul (pero puede modificar el código para cambiar el color, el tamaño, etc.), agregue esto a su CSS:

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

Aquí hay una captura de pantalla que muestra el efecto: antes y después:

Llegué a este hilo buscando la manera de desactivar el brillo por completo. Muchas respuestas fueron demasiado complicadas para mi propósito. Para una solución fácil, solo necesitaba una línea de CSS de la siguiente manera.

input, textarea, button {outline: none; }

Agregue un Id a la etiqueta del cuerpo. En su propio Css (no el bootstrap.css), apunte a la nueva ID del cuerpo y establezca la clase o etiqueta que desea anular y las nuevas propiedades. Ahora puede actualizar bootstrap en cualquier momento sin perder sus cambios.

archivo html:

  <body id="bootstrap-overrides">

archivo css:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Ver también: mejor forma de anular bootstrap css

En realidad, en Bootstrap 4.0.0-Beta (a partir de octubre de 2017) el elemento de entrada no está referenciado por input [type = "text"] , todas las propiedades de Bootstrap 4 para el elemento de entrada son realmente formas basadas en .

Entonces está usando .form-control: estilos de enfoque . El código apropiado para el resaltado "en foco" de un elemento de entrada es el siguiente:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

Bastante fácil de implementar, solo cambie la propiedad del color del borde .

En Bootstrap 3.3.7 puede cambiar el valor de @ input-border-focus en la sección Formularios del personalizador:

A partir de la respuesta anterior de @ wasinger , en Bootstrap 4.5 tuve que anular no solo las variables de color sino también las box-shadowpropias.

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

¿Por qué no solo usar?

 input:focus{
        outline-color : #7a0ac5;
    }

No pude resolver esto con CSS. Parece que Boostrap está teniendo la última palabra a pesar de que tengo por site.css después de bootstrap. En cualquier caso, esto funcionó para mí.

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

Más tarde encontré que esto funcionaba en el CSS. Obviamente solo con controles de formulario

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
} 

Aquí hay fotos de antes y después de la herramienta Chrome Developer. Observe la diferencia en el color del borde entre el enfoque activado y el enfoque desactivado. En una nota al margen, esto no funciona para los botones. Con botones Con los botones, debe cambiar la propiedad del esquema a ninguno.

Para el borde de entrada antes del foco. Puede especificar su color favorito que desea usar y otros css como relleno, etc.

.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

Cuando nos centramos en la entrada. Puede especificar su esquema de color favorito que desee

.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

Si desea eliminar la sombra, agregue completamente la clase shadow-nonea su elemento de entrada.