Переопределить свечение и тени текстового поля twitter bootstrap

88

Я хочу удалить синее свечение текстового поля и границы, но я не знаю, как переопределить любой из js или css, отметьте здесь

ИЗМЕНИТЬ 1

Я хочу сделать это, потому что я использую плагин jquery Tag-it, и я также использую загрузку twitter, плагин использует скрытое текстовое поле для добавления тегов, но когда я использую bootstrap twitter, он отображается как текстовое поле со свечением внутри текстовое поле, которое немного странно

Фади Камаль
источник
У вас есть возможность добавить новый класс? Если это так, просто добавьте новый класс сborder:none; box-shadow:none;
jeschafe
1
@jeschafe Здесь и по-прежнему ничего
Fady Kamal
1
могу я спросить, почему вы все равно хотите это сделать? сосредоточение внимания на кликах - преимущество по многим причинам.
Глин Джексон
@GlynJackson Пожалуйста, проверьте Edit 1
Fady Kamal
3
Не вижу причин для голосования против. Я столкнулся с той же проблемой. Однако в моем случае мне нужно было сделать границу красной, чтобы указать на ошибку проверки. Однако из-за свечения он был просто невидим.
Ойбек

Ответы:

143
.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
jeschafe
источник
27

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

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(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
Hawkee
источник
3
Стоит отметить, что здесь нет <select>селектора.
Брайс Йорк
11
input.simplebox:focus {
  border: solid 1px #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}

устанавливает для начальной загрузки несфокусированного стиля

Остин Греко
источник
7

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

input.form-control,input.form-control:focus {
    border:none;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}
хромирование
источник
7

Перейдите в Customize Bootstrap , найдите @ input-border-focus, введите желаемый цветовой код, прокрутите вниз и нажмите «Compile and Download».


источник
7

если вы думаете, что не можете справиться с классом css, просто добавьте стиль в текстовое поле

<input type="text" style="outline:none; box-shadow:none;">
Димгба Калу
источник
5

это удалит границу и фокус синей тени.

input.simplebox,input.simplebox:focus {
  border:none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
}

http://jsfiddle.net/pE5mQ/64/

Глин Джексон
источник
4

В bootstrap 3 есть небольшой топ на ios, который можно удалить следующим образом:

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
    -webkit-appearance: caret;
    -moz-appearance: caret; /* mobile firefox too! */
}

Получил отсюда

Крис
источник
1
Глядя на комментарии по предоставленной вами ссылке, обычно лучше использовать «none» вместо «caret».
Райан Уолтон
2

На этом этапе префиксы поставщика не нужны, если вы не поддерживаете устаревшие браузеры, и вы можете упростить свои селекторы, просто ссылаясь на все входные данные, а не на каждый из отдельных типов.

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}
Мелани Зайферт
источник
0

HTML

<input type="text" class="form-control shadow-none">

CSS

input:focus{
    border: 1px solid #ccc
}
Саван Падалия
источник
0
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}
Прадип
источник