Перевизначити твіттер bootstrap Textbox Glow and Shadows


88

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

РЕДАГУВАТИ 1

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


Чи можете ви додати новий клас? Якщо так, просто додайте новий клас за допомогоюborder:none; box-shadow:none;
jeschafe

1
@jeschafe Тут , і все ще нічого
Fady Kamal

1
Чи можу я запитати, чому ти все одно хочеш це зробити? корисно зосередити увагу на натисканні з багатьох причин.
Глін Джексон,

@GlynJackson Будь ласка, перевірте Редагування 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;
}

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

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

якщо ви вважаєте, що не можете впоратися з класом css, просто додайте стиль до текстового поля

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


4

На 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! */
}

Отримав звідси


1
Переглядаючи коментарі за наданим вами посиланням, зазвичай краще використовувати "none" замість "caret".
Райан Уолтон,

2

На даний момент префікси постачальників не потрібні, якщо ви не підтримуєте застарілі браузери, і ви можете спростити селектори, просто посилаючись на всі входи, а не на кожен з окремих типів.

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


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.