Переопределить начальную загрузку Twitter Textbox Glow and Shadows

Question

Переопределить начальную загрузку Twitter Textbox Glow and Shadows

78

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

РЕДАКТИРОВАТЬ 1

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

Fady Kamal 30 авг. 2012, в 15:25

Источник

0

У вас есть возможность добавить новый класс? Если это так, просто добавьте новый класс с border:none; box-shadow:none;
jeschafe 30 авг. 2012, в 15:40
1

@jeschafe Здесь и до сих пор ничего
Fady Kamal 30 авг. 2012, в 15:41
1

Могу ли я спросить, почему вы хотите это сделать? Выгодно фокусироваться на клике по многим причинам.
Glyn Jackson 30 авг. 2012, в 15:52
0

@GlynJackson Пожалуйста, проверьте Редактировать 1
Fady Kamal 30 авг. 2012, в 15:58
0

Я вижу, имеет больше смысла, спасибо
Glyn Jackson 30 авг. 2012, в 16:06
3

Не вижу причины для понижения. Я столкнулся с той же проблемой. Однако в моем случае мне нужно было сделать границу красной, чтобы указать на ошибку проверки. Однако из-за свечения он был просто невидим.
Oybek 31 окт. 2012, в 07:13
0

это помогло мне: [начальная загрузка меняет цвет границы текста или контура входного текста] [1] [1]: stackoverflow.com/questions/17097512/…
change 26 июнь 2013, в 21:27

Показать ещё 5 комментариев

Теги:

javascript

jquery

twitter-bootstrap

html

css

9 ответов

26

Вы также можете переопределить параметр 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 16 янв. 2013, в 21:14

3

Стоит отметить, что селектор <select> здесь не включен.
Bryce York 31 март 2014, в 07:55

9

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

устанавливает для бутстрапа несфокусированный стиль

Austin Greco 30 авг. 2012, в 17:33

6

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

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

cromination 06 май 2014, в 15:54

4

Перейдите в Настроить Bootstrap, найдите @input-border-focus, введите желаемый цветовой код, прокрутите вниз и нажмите "Скомпилировать и загрузить".

user2481398 01 сен. 2014, в 03:17

4

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

<input type="text" style="outline:none; box-shadow:none;">

Dimgba Kalu 27 окт. 2012, в 01:46

4

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

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/

Glyn Jackson 30 авг. 2012, в 16:34

3

В bootstrap 3 есть небольшая вершина shodow на ios, можно удалить с помощью этого:

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

Получил это от здесь

chris 04 дек. 2013, в 10:01

1

Глядя на комментарии по предоставленной вами ссылке, обычно лучше использовать «нет» вместо «каретка».
Ryan Walton 08 фев. 2014, в 21:45

0

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

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}

Melanie Seifert 03 нояб. 2017, в 16:20

Ещё вопросы

У вас есть возможность добавить новый класс? Если это так, просто добавьте новый класс с border:none; box-shadow:none;
Могу ли я спросить, почему вы хотите это сделать? Выгодно фокусироваться на клике по многим причинам.
@GlynJackson Пожалуйста, проверьте Редактировать 1
Я вижу, имеет больше смысла, спасибо
Не вижу причины для понижения. Я столкнулся с той же проблемой. Однако в моем случае мне нужно было сделать границу красной, чтобы указать на ошибку проверки. Однако из-за свечения он был просто невидим.
это помогло мне: [начальная загрузка меняет цвет границы текста или контура входного текста] [1] [1]: stackoverflow.com/questions/17097512/…
Стоит отметить, что селектор <select> здесь не включен.
Глядя на комментарии по предоставленной вами ссылке, обычно лучше использовать «нет» вместо «каретка».

jeschafe · Accepted Answer · 2012-08-30T16-31-00.000Z

.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}