Изменить начальную загрузку фокуса синего свечения

Кто-нибудь знает как поменять Bootstrap input:focus? Голубое свечение, которое появляется, когда вы нажимаете на inputполе?

В конце я изменил следующую запись CSS в 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;
}

Вы можете использовать .form-controlселектор, чтобы соответствовать всем входам. Например, чтобы изменить на красный:

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

Поместите его в свой собственный CSS-файл и загрузите его после bootstrap.css. Он будет применяться ко всем входным данным, включая textarea, select и т. Д.

Если вы используете Bootstrap 3.x, теперь вы можете изменить цвет с помощью новой @input-border-focusпеременной.

Смотрите коммит для получения дополнительной информации и предупреждений.

В обновлении _variables.scss@input-border-focus .

Чтобы изменить размер / другие части этого свечения, измените 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);
  }
}

Вы можете изменить .form-control:focus цвет без изменения стиля начальной загрузки следующим образом:

Быстрая починка

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

Полное объяснение

1. Найдите версию bootstrapCDN, которую вы используете. Например, для меня сейчас 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Найдите класс, который вы хотите изменить. Например, .form-control:focusскопируйте параметры, которые вы хотите изменить, в свой CSS. В этом случае есть border-colorи box-shadow.
3. Выберите цвет для border-color. В этом случае я выбираю тот же зеленый, который использует загрузчик для своего .btn-successкласса, путем поиска этого конкретного класса на странице bootstrap.css, упомянутой в шаге 1.
4. Преобразуйте выбранный вами цвет в RGB и добавьте его к box-shadowпараметру, не изменяя четвертый параметр RGBA (0,25), который загружает для прозрачности.

Для бета-версии Bootstrap v4.0.0 вам потребуется добавить следующее в таблицу стилей, которая переопределяет Bootstrap (либо добавьте после CDN / локальной ссылки на бета-версию Bootstrap v4.0.0, либо добавьте !importantв стили:

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

Замените border-color и rgba на box-shadow любым цветом, который вы хотите *.

В Bootstrap 4, если вы сами компилируете SASS, вы можете изменить следующие переменные, чтобы управлять стилем тени фокуса:

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

Примечание: по состоянию на Bootstrap 4.1, $input-btn-focus-colorи $input-btn-focus-box-shadowпеременные используются только для входных элементов, но не для кнопок. Тень фокуса для кнопок жестко закодирована box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, так что вы можете контролировать ширину тени только через $input-btn-focus-widthпеременную.

Вот изменения, если вы хотите, чтобы Chrome отображал «желтый» контур платформы по умолчанию.

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

Чтобы отключить синее свечение (но вы можете изменить код для изменения цвета, размера и т. Д.), Добавьте это в ваш css:

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

Вот снимок экрана, показывающий эффект: до и после:

Я приземлился в этой теме, ища способ полностью отключить свечение. Многие ответы были слишком сложными для моей цели. Для простого решения мне просто понадобилась одна строка CSS следующим образом.

input, textarea, button {outline: none; }

Добавьте Id к тегу body. В вашем собственном Css (не bootstrap.css) укажите новый идентификатор тела и установите класс или тег, который вы хотите переопределить, и новые свойства. Теперь вы можете в любое время обновить загрузчик без потери изменений.

HTML-файл:

  <body id="bootstrap-overrides">

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

Смотрите также: лучший способ переопределить загрузчик CSS

На самом деле, в Bootstrap 4.0.0-Beta (по состоянию на октябрь 2017 года) на элемент input не ссылается input [type = "text"] , все свойства Bootstrap 4 для элемента input на самом деле основаны на форме .

Так что он использует .form-control: стили фокуса . Соответствующий код для выделения «на фокусе» элемента ввода следующий:

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

Довольно легко реализовать, просто измените свойство border-color .

В Bootstrap 3.3.7 вы можете изменить значение @ input-border-focus в разделе Forms настройщика:

Основываясь на ответе @ wasinger выше, в Bootstrap 4.5 мне пришлось переопределить не только переменные цвета, но и box-shadowсаму себя.

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

Почему бы просто не использовать?

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

Я не мог решить это с помощью CSS. Похоже, что Boostrap получает последнее слово, хотя у меня есть site.css после начальной загрузки. В любом случае, это сработало для меня.

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

Позже я нашел это, чтобы работать в CSS. Очевидно, только с формами управления

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

Вот снимки до и после из инструмента Chrome Developer. Обратите внимание на разницу в цвете границы между фокусировкой и фокусировкой. На заметку, это не работает для кнопок. С кнопками. С помощью кнопок вы должны изменить свойство структуры на none.

Для границы ввода перед фокусом. Вы можете указать свой любимый цвет, который вы хотите использовать, и другие CSS, такие как отступы и т. Д.

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

Когда мы сосредоточены на вводе. Вы можете указать свой любимый цвет, который вы хотите

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

Если вы хотите полностью удалить тень, добавьте класс shadow-noneв ваш элемент ввода.