Cambia Bootstrap input focus bagliore blu

Qualcuno sa come cambiare Bootstrap input:focus ? Il bagliore blu che appare quando si fa clic su un inputcampo?

Alla fine ho modificato la seguente voce css in 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;
}

È possibile utilizzare il .form-controlselettore per abbinare tutti gli input. Ad esempio per passare al rosso:

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

Inseriscilo nel tuo file css personalizzato e caricalo dopo bootstrap.css. Si applicherà a tutti gli input tra cui textarea, seleziona ecc ...

Se stai usando Bootstrap 3.x, ora puoi cambiare il colore con il nuovo @input-border-focus variabile.

Vedi il commit per maggiori informazioni e avvisi.

In _variables.scss aggiornamento@input-border-focus .

Per modificare le dimensioni / altre parti di questo bagliore, modificare 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);
  }
}

È possibile modificare il .form-control:focus colore senza alterare lo stile bootstrap in questo modo:

Soluzione rapida

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

Spiegazione completa

1. Trova la versione bootstrapCDN che stai utilizzando. Ad esempio, per me adesso è 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Cerca la classe che desideri modificare. Es. .form-control:focusE copia i parametri che vuoi modificare nel tuo CSS. In questo caso è border-colore box-shadow.
3. Scegli un colore per il border-color. In questo caso, ho scelto di raccogliere lo stesso green utilizzato da bootstrap per la loro .btn-successclasse, cercando quella particolare classe nella pagina bootstrap.css menzionata nel passaggio 1.
4. Converti il ​​colore che hai scelto in RGB e aggiungilo al box-shadowparametro senza alterare il quarto parametro RGBA (0.25) di bootstrap per la trasparenza.

Per la versione beta di Bootstrap v4.0.0 è necessario aggiungere quanto segue a un foglio di stile che sostituisce Bootstrap (aggiungere dopo il collegamento CDN / locale a bootstrap v4.0.0 beta o aggiungere !importantagli stili:

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

Sostituisci il colore del bordo e l'rgba sull'ombra della scatola con lo stile di colore che desideri *.

In Bootstrap 4, se compili SASS da solo, puoi modificare le seguenti variabili per controllare lo stile dell'ombra di messa a fuoco:

$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 partire da Bootstrap 4.1, le variabili $input-btn-focus-colore $input-btn-focus-box-shadowsono utilizzate solo per gli elementi di input, ma non per i pulsanti. L'ombra di messa a fuoco per i pulsanti è hardcoded come box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, quindi puoi controllare la larghezza dell'ombra solo tramite la $input-btn-focus-widthvariabile.

Ecco le modifiche se desideri che Chrome mostri il profilo "giallo" predefinito della piattaforma.

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

Per disabilitare il bagliore blu (ma puoi modificare il codice per cambiare colore, dimensione, ecc.), Aggiungi questo al tuo CSS:

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

Ecco una screencapture che mostra l'effetto: prima e dopo:

Sono arrivato a questo thread cercando il modo per disabilitare del tutto il bagliore. Molte risposte sono state complicate per il mio scopo. Per una soluzione semplice, avevo solo bisogno di una riga di CSS come segue.

input, textarea, button {outline: none; }

Aggiungi un ID al tag body. Nel tuo Css (non bootstrap.css), punta al nuovo ID del corpo e imposta la classe o il tag che desideri sovrascrivere e le nuove proprietà. Ora puoi aggiornare bootstrap in qualsiasi momento senza perdere le modifiche.

file html:

  <body id="bootstrap-overrides">

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

Vedi anche: il modo migliore per sovrascrivere bootstrap css

In realtà, in Bootstrap 4.0.0-Beta (a partire da ottobre 2017) l'elemento di input non è referenziato dall'input [type = "text"] , tutte le proprietà Bootstrap 4 per l'elemento di input sono effettivamente form basate sul .

Quindi sta usando il .form-control: focus styles. Il codice appropriato per l'evidenziazione "attivo" di un elemento di input è il seguente:

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

Abbastanza facile da implementare, basta cambiare la proprietà border-color .

In Bootstrap 3.3.7 è possibile modificare il valore @ input-border-focus nella sezione Forms del personalizzatore:

Sulla base della risposta di @ wasinger sopra, in Bootstrap 4.5 ho dovuto sovrascrivere non solo le variabili di colore ma anche la box-shadowstessa.

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

Perché non usare solo?

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

Non sono riuscito a risolverlo con CSS. Sembra che Boostrap stia ottenendo l'ultima parola, anche se dopo bootstrap ho di site.css. In ogni caso, questo ha funzionato per me.

$(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";
}

Più tardi ho scoperto che questo funzionava nel CSS. Ovviamente solo con controlli del modulo

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

Ecco gli scatti prima e dopo dallo strumento sviluppatore di Chrome. Notare la differenza di colore del bordo tra lo stato attivo e lo stato attivo. In una nota a margine, questo non funziona per i pulsanti. Con bottoni. Con i pulsanti devi cambiare la proprietà del contorno in nessuno.

Per il bordo di input prima del focus. È possibile specificare il colore preferito che si desidera utilizzare e altri CSS come imbottitura ecc

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

Quando ci concentriamo sull'input. È possibile specificare il contorno del colore preferito che si desidera

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

Se si desidera rimuovere completamente l'ombra, aggiungere la classe shadow-none al tuo elemento di input.