Змінити вхідний фокус завантажувального синього світла

Хтось знає, як змінити 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;
}

Замініть колір рамки та rgba на тінь поля, яким ви хочете будь-який колірний стиль *.

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

Додайте ідентифікатор до тегу 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

Насправді, у Bootstrap 4.0.0-Beta (станом на жовтень 2017 року) на вхідний елемент не посилається введення [type = "text"] , всі властивості Bootstrap 4 для елемента введення фактично засновані на формі .

Тож використовується стилі .form-control: фокус . Відповідним кодом для виділення вхідного елемента "фокусування" є наступний:

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

Досить простий у виконанні, просто змініть властивість кольору межі .

У 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 отримує останнє слово, навіть якщо я маю сайт.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. Зауважте різницю кольору меж між фокусом і фокусом. З іншого боку, це не працює для кнопок. За допомогою кнопок. За допомогою кнопок ви повинні змінити властивість контуру на жодну.

Для межі введення перед фокусом. Ви можете вказати свій улюблений колір, який ви хочете використовувати, та інші 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до вхідного елемента.