web-dev-qa-db-fra.com

Ignorer Twitter bootstrap Zone de saisie lueur et ombres

Je veux supprimer la lueur bleue de la zone de texte et de la bordure, mais je ne sais pas comment remplacer aucun des fichiers js ou css, cochez la case Ici

EDIT 1

Je veux faire cela parce que j'utilise le plugin jQuery Tag-it et j'utilise Twitter bootstrap aussi, le plugin utilise un textField masqué pour ajouter les balises, mais quand j'utilise Twitter bootstrap), il apparaît sous la forme d'une zone de texte avec une lueur à l'intérieur d'une zone de texte, ce qui est un peu étrange.

javascriptjqueryhtmlcsstwitter-bootstrap
86
Fady Kamal
.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
139
jeschafe

Vous pouvez également remplacer le paramètre par défaut Bootstrap pour utiliser vos propres couleurs

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

définit sur bootstrap style non ciblé

10
Austin Greco

Allez à Personnaliser l'amorçage , recherchez @ input-border-focus, entrez le code de couleur de votre choix, faites défiler l'écran vers le bas et cliquez sur "Compiler et télécharger".

7
user2481398

si vous pensez que vous ne pouvez pas gérer la classe css, ajoutez simplement un style au champ de texte

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

Après avoir creusé un peu, je pense qu'ils l'ont changé dans le dernier bootstrap. Le code ci-dessous a fonctionné pour moi, ce n’est pas une simple boîte, mais le contrôle de forme que j’utilisais causait le problème.

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
cromination

cela supprimera la bordure et l'ombre bleue de la mise au point.

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/

5
Glyn Jackson

Sur bootstrap 3 il y a une petite ombre en haut sur iOS, pourrait être supprimée avec ceci:

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

Je l'ai eu de ici

4
chris

Les préfixes de fournisseur ne sont pas nécessaires à ce stade, à moins que vous ne preniez en charge des navigateurs hérités, et vous pouvez simplifier vos sélecteurs en vous référant simplement à toutes les entrées plutôt qu'à chacun des types individuels.

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