1. дома
  2. Вопрос и ответ
  3. Change Bootstrap input focus blue glow

Change Bootstrap input focus blue glow

2013-02-11 4 views
130

Кто-нибудь знает, как изменить начальный фокус синего свечения бутстрапа. Т.е. свечение, которое отображается при нажатии поля ввода?Change Bootstrap input focus blue glow

источник

2013-02-11 felix001

+0

Как я могу видеть селектор фокуса в нескольких местах Я не уверен, что я должен его изменить? – felix001

+1

Очевидно, что @mdo на 100% не позволяет указать цвет свечения с переменной LESS: https://github.com/twitter/bootstrap/issues/2742 –

ответ

171

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

источник

2013-02-11 23:30:22 felix001

+3

Я столкнулся с таргетингом на 'input [type] {}' – Morpheus

+2

Это больше не нужно с Bootstrap 3.x. См. Мой ответ для получения дополнительной информации. –

+0

@Cricket Эта переменная в настоящее время недоступна в Настройщике Boostrap :( – Caumons

10

Вот изменения, если вы хотите 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; 
}

источник

2013-08-03 14:59:41 peater

+1

Как отключить хром-желтый контур? – Roylee

+4

@Roylee Вы пробовали вышесказанное с помощью только 'outline: none;' – peater

+0

Собственно, НЕ отключите все: фокусы фокуса (как я предложил выше). Это ужасно для доступности для пользователей только для клавиатуры. Вы можете отключить значения по умолчанию для платформы, как указано выше, и добавить что-то подходящим образом: 'outline: dotted thin black;' (или что бы вы ни предложили для тестирования) – peater

55

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

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

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

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

источник

2013-09-06 17:13:54

+4

Есть ли у вас пример того, как это сделать? Заранее спасибо – Seany84

+2

Вам нужно использовать версии Lesss или [Sass] (https://github.com/twbs/bootstrap-sass) таблиц стилей Bootstrap. Затем установите свою настраиваемую переменную перед импортом таблиц стилей Bootstrap, и она переопределит значения по умолчанию для Bootstrap. Вам нужно будет предварительно скомпилировать ваши таблицы стилей или использовать что-то вроде [Sprockets] (https://github.com/sstephenson/sprockets). –

+0

Вы также можете использовать официальный сайт начальной загрузки для внесения пользовательских изменений в меньшие переменные: http://getbootstrap.com/customize/ –

117

В Bootstrap 3 вы можете использовать .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. Он будет применяться ко всем входам, включая текстовое поле, выберите и т.д. ...

источник

2015-01-05 11:40:54 igaster

+0

Это не то, что хотел OP.Он спрашивал, как изменить свечение, а не границу – lonesword

+5

@lonesword правильно, вам нужно изменить цвет границы и тень. Я обновил ответ – igaster

+1

Это намного чище, чем решение @ felix001, и оно работает – dspacejs

5

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

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

Вот ScreenCapture, показывающий эффект: до и после: enter image description here enter image description here

источник

2015-05-22 13:16:52 radhoo

+0

Это сработало для меня. Но мне также пришлось добавить пограничный цвет, так как он оставил бы его синим. –

5

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

input, textarea, button {outline: none; }

источник

2015-09-28 15:51:50 massanishi

+0

Я бы подумал, что вам может понадобиться «box-shadow: none;». – silverliebt

+1

Это сработало для меня, но мне пришлось добавить '! Important' после' box-shadow', предложенного @silverliebt –

4

Добавить идентификатор тега тела. В вашем собственном 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; 
}

Смотрите также: best way to override bootstrap css

источник

2016-03-30 14:00:26 homefreelancer

3

На самом деле, в 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; 
}

Довольно легко реализовать, просто изменить границы цвета собственности.

источник

2017-10-15 02:04:00

+0

Или, если вы используете scss, просто переопределите переменную $ input-focus-border-color для bootstrap 4.0.0- Beta –

+0

Думаю, вам также нужно добавить в это 'box-shadow: xpx ypx # 80bdff;' –

2

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

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

Замените пограничный цвет и rgba на теневой тень, с которой вы хотели бы всегда иметь стиль цвета *.

источник

2018-01-02 18:39:54

0

В Bootstrap 3.3.7 вы можете изменить значение @ -граничного фокуса в разделе «Формы» изготовителя: enter image description here

источник

2018-01-30 08:38:41 Steve

Смежные вопросы

 Смежные вопросы