Überschreiben Sie den Twitter-Bootstrap Textbox Glow and Shadows

89

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

Fady Kamal
quelle
Haben Sie die Möglichkeit, eine neue Klasse hinzuzufügen? Wenn ja, fügen Sie einfach eine neue Klasse hinzu mitborder:none; box-shadow:none;
jeschafe
1
@jeschafe Hier und immer noch nichts
Fady Kamal
1
Kann ich fragen, warum du das überhaupt machen willst? Es ist aus vielen Gründen von Vorteil, sich auf das Klicken zu konzentrieren.
Glyn Jackson
@ GlynJackson Bitte überprüfen Sie Bearbeiten 1
Fady Kamal
3
Ich sehe keinen Grund für eine Ablehnung. Ich bin auf das gleiche Problem gestoßen. In meinem Fall musste ich jedoch den Rand rot machen, um den Validierungsfehler anzuzeigen. Aufgrund des Glühens war es jedoch einfach unsichtbar.
Oybek

Antworten:

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

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);
}
Hawkee
quelle
3
Es ist erwähnenswert, dass der <select>Selektor hier nicht enthalten ist.
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;
}

Setzt den nicht fokussierten Bootstrap-Stil

Austin Greco
quelle
7

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

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".


quelle
7

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;">
Dimgba Kalu
quelle
5

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/

Glyn Jackson
quelle
4

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

chris
quelle
1
Wenn Sie sich die Kommentare des von Ihnen angegebenen Links ansehen, ist es normalerweise besser, "keine" anstelle von "caret" zu verwenden.
Ryan Walton
2

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;
}
Melanie Seifert
quelle
0

HTML

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

CSS

input:focus{
    border: 1px solid #ccc
}
Savan Padaliya
quelle