Überschreiben Sie den Twitter-Bootstrap Textbox Glow and Shadows

Ich möchte das blaue Leuchten des Textfelds und des Rahmens entfernen, aber ich weiß nicht, wie ich eines der js oder das css davon überschreiben soll. Überprüfen Sie hier

BEARBEITEN 1

Ich möchte dies tun, weil ich das jquery-Plugin Tag-it verwende und auch den Twitter-Bootstrap verwende. Das Plugin verwendet ein verstecktes Textfeld, um die Tags hinzuzufügen. Wenn ich jedoch den Twitter-Bootstrap verwende, wird es als Textfeld mit Glühen in einem angezeigt Textfeld, das ein bisschen seltsam ist

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

Sie können auch die Standardeinstellung für den Bootstrap überschreiben, um Ihre eigenen Farben zu verwenden

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

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

Setzt den nicht fokussierten Bootstrap-Stil

Nach einigem Graben haben sie es wohl im neuesten Bootstrap geändert. Der folgende Code hat bei mir funktioniert, es ist keine einfache Box, deren Formularsteuerung, die ich verwendet habe, das Problem verursacht hat.

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

Gehen Sie zu Bootstrap anpassen , suchen Sie nach @ input-border-focus, geben Sie den gewünschten Farbcode ein, scrollen Sie nach unten und klicken Sie auf "Kompilieren und Herunterladen".

Wenn Sie der Meinung sind, dass Sie mit der CSS-Klasse nicht umgehen können, fügen Sie dem Textfeld einfach einen Stil hinzu

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

Dadurch werden der Rand und der blaue Fokusschatten entfernt.

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/

Auf Bootstrap 3 gibt es einen kleinen Top Shodow auf iOS, der damit entfernt werden könnte:

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

Habe es von hier bekommen

Herstellerpräfixe sind zu diesem Zeitpunkt nicht erforderlich, es sei denn, Sie unterstützen ältere Browser, und Sie können Ihre Selektoren vereinfachen, indem Sie sich nur auf alle Eingaben und nicht auf die einzelnen Typen beziehen.

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

HTML

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

CSS

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