Alterar o foco de entrada do Bootstrap

Alguém sabe como mudar o Bootstrap input:focus? O brilho azul que aparece quando você clica em um inputcampo?

No final, mudei a seguinte entrada css no 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;
}

Você pode usar o .form-controlseletor para corresponder a todas as entradas. Por exemplo, para mudar para vermelho:

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

Coloque-o no seu arquivo CSS personalizado e carregue-o após o bootstrap.css. Será aplicado a todas as entradas, incluindo área de texto, seleção etc ...

Se você estiver usando o Bootstrap 3.x, agora poderá alterar a cor com a nova @input-border-focusvariável.

Veja o commit para mais informações e avisos.

Na atualização _variables.scss@input-border-focus .

Para modificar o tamanho / outras partes desse brilho, modifique o 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);
  }
}

Você pode modificar a .form-control:focus cor sem alterar o estilo de inicialização da seguinte maneira:

Conserto rápido

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

Explicação completa

1. Encontre a versão do bootstrapCDN que você está usando. Por exemplo, para mim, no momento, é 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Procure a classe que você deseja modificar. Por exemplo, .form-control:focuse copie os parâmetros que você deseja modificar em seu css. Nesse caso, é border-colore box-shadow.
3. Escolha uma cor para o border-color. Nesse caso, eu escolho escolher o mesmo verde que o bootstrap usa para sua .btn-successclasse, procurando por essa classe específica na página bootstrap.css mencionada na etapa 1.
4. Converta a cor escolhida em RGB e adicione-a ao box-shadowparâmetro sem alterar o quarto parâmetro RGBA (0,25) que a inicialização possui para transparência.

Para a versão beta do Bootstrap v4.0.0, você precisará adicionar o seguinte a uma folha de estilo que substitui o Bootstrap (adicione o link após CDN / local ao bootstrap v4.0.0 beta ou adicione !importantos estilos:

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

Substitua a cor da borda e o rgba na sombra da caixa pelo estilo de cor que você desejar *.

No Bootstrap 4, se você compilar o SASS sozinho, poderá alterar as seguintes variáveis ​​para controlar o estilo da sombra do 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 do Bootstrap 4.1, as variáveis $input-btn-focus-colore $input-btn-focus-box-shadowsão usadas apenas para elementos de entrada, mas não para botões. A sombra de foco dos botões é codificada como box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, portanto, você pode controlar a largura da sombra apenas através da $input-btn-focus-widthvariável

Aqui estão as alterações se você deseja que o Chrome mostre o contorno "amarelo" padrão da 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 desativar o brilho azul (mas você pode modificar o código para alterar a cor, tamanho, etc.), adicione isso ao seu css:

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

Aqui está uma captura de tela mostrando o efeito: antes e depois:

Cheguei a esse tópico procurando a maneira de desativar o brilho completamente. Muitas respostas foram complicadas demais para o meu propósito. Para uma solução fácil, eu só precisava de uma linha de CSS da seguinte maneira.

input, textarea, button {outline: none; }

Adicione um ID à tag do corpo. No seu próprio Css (não no bootstrap.css), aponte para o novo ID do corpo e defina a classe ou a tag que você deseja substituir e as novas propriedades. Agora você pode atualizar a inicialização a qualquer momento sem perder suas alterações.

arquivo html:

  <body id="bootstrap-overrides">

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

Consulte também: melhor maneira de substituir o bootstrap css

Na verdade, no Bootstrap 4.0.0-Beta (a partir de outubro de 2017), o elemento de entrada não é referenciado por input [type = "text"]] , todas as propriedades do Bootstrap 4 para o elemento de entrada são realmente forma baseadas em .

Portanto, ele está usando o .form-control: focus styles. O código apropriado para o destaque "em foco" de um elemento de entrada é o seguinte:

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

Muito fácil de implementar, basta alterar a propriedade da cor da borda .

No Bootstrap 3.3.7, você pode alterar o valor @ input-border-focus na seção Forms do personalizador:

Com base na resposta de @ wasinger acima, no Bootstrap 4.5, eu tive que substituir não apenas as variáveis ​​de cores, mas também as box-shadowpróprias.

$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 que não usar apenas?

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

Não consegui resolver isso com CSS. Parece que o Boostrap está recebendo a última palavra, mesmo que eu tenha o site.css após a inicialização. De qualquer forma, isso funcionou para mim.

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

Mais tarde, descobri que isso funcionava no css. Obviamente, apenas com controles de formulário

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

Aqui estão as fotos antes e depois da ferramenta Chrome Developer. Observe a diferença na cor da borda entre o foco e o foco. Em uma nota lateral, isso não funciona para os botões. Com botões Com os botões, você deve alterar a propriedade do contorno para nenhuma.

Para a borda de entrada antes do foco. Você pode especificar sua cor favorita que deseja usar e outros CSS, como preenchimento, etc.

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

Quando nos concentramos na entrada. Você pode especificar o seu contorno de cor favorito que desejar

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

Se você deseja remover a sombra, adicione completamente a classe shadow-noneao seu elemento de entrada.