Изменение бутстрапа ввода фокус синее свечение

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

Вы можете использовать селектор .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 и т.д.

Ответ 3

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

Подробнее см. commit для получения дополнительной информации и предупреждений.

В _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);
  }
}

Ответ 4

Ниже приведены изменения, если вы хотите, чтобы 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;
}

Ответ 5

Для бета-версии 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 любым стилем цвета, который вам нужен *.

Ответ 6

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

Примечание: $input-btn-focus-color с 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.

Ответ 7

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

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

Ответ 8

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

input, textarea, button {outline: none; }

Ответ 9

Добавить идентификатор тега 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

Ответ 10

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

Таким образом, он использует стили .form-control: focus. Соответствующий код для подсветки "на фокусе" входного элемента выглядит следующим образом:

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

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

Ответ 11

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