Remplacer la lueur et les ombres de la zone de texte d'amorçage de Twitter

89

Je veux supprimer la lueur bleue de la zone de texte et de la bordure, mais je ne sais pas comment remplacer l'un des js ou le css de celui-ci, cochez ici

MODIFIER 1

Je veux faire cela parce que j'utilise le plugin jquery Tag-it et que j'utilise également le bootstrap de twitter, le plugin utilise un textField caché pour ajouter les balises, mais lorsque j'utilise le bootstrap de twitter, il apparaît comme une zone de texte avec une lueur à l'intérieur d'un zone de texte qui est un peu étrange

— Fady Kamal
source

Avez-vous la possibilité d'ajouter une nouvelle classe? Si c'est le cas, ajoutez simplement une nouvelle classe avecborder:none; box-shadow:none;

— jeschafe

1

@jeschafe Ici , et toujours rien

— Fady Kamal

1

puis-je vous demander pourquoi vous voulez faire cela de toute façon? c'est un avantage de se concentrer sur le clic pour de nombreuses raisons.

— Glyn Jackson

@GlynJackson Veuillez vérifier Edit 1

— Fady Kamal

3

Ne voyez pas la raison d'un vote défavorable. J'ai rencontré le même problème. Cependant, dans mon cas, je devais rendre la bordure rouge pour indiquer l'erreur de validation. Cependant, en raison de la lueur, il était tout simplement invisible.

— Oybek

144

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

— jeschafe
source

27

Vous pouvez également remplacer le paramètre Bootstrap par défaut 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);
}

— Hawkee
source

3

il est à noter que le <select>sélecteur n'est pas inclus ici.

— Bryce York

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

définit pour amorcer un style flou

— Austin Greco
source

7

Après avoir creusé, 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 de contrôle de formulaire que j'utilisais qui 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;
}

— cromination
source

7

Allez dans Personnaliser Bootstrap , recherchez @ input-border-focus, entrez votre code couleur souhaité, faites défiler vers le bas et cliquez sur "Compiler et télécharger".

7

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

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

— Dimgba Kalu
source

5

cela supprimera la bordure et l'ombre bleue de 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/

— Glyn Jackson
source

4

Sur bootstrap 3, il y a un petit top shodow sur ios, qui pourrait être supprimé avec ceci:

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

J'ai obtenu d' ici

— Chris
source

1

En regardant les commentaires du lien que vous avez fourni, il est généralement préférable d'utiliser «aucun» au lieu de «caret».

— Ryan Walton

2

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

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

— Mélanie Seifert
source

0

HTML

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

CSS

input:focus{
    border: 1px solid #ccc
}

— Savan Padaliya
source