Ignora bagliore e ombre della casella di testo bootstrap di Twitter

89

Voglio rimuovere il bagliore blu della casella di testo e del bordo, ma non so come sovrascrivere nessuno dei js o dei css, controlla qui

MODIFICA 1

Voglio farlo perché sto usando il plugin jquery Tag-it e sto usando anche il bootstrap di Twitter, il plugin usa un campo di testo nascosto per aggiungere i tag, ma quando uso il bootstrap di Twitter appare come una casella di testo con bagliore all'interno di un casella di testo che è un po 'strana

— Fady Kamal
fonte

Hai la possibilità di aggiungere una nuova classe? In tal caso, aggiungi una nuova classe conborder:none; box-shadow:none;

— jeschafe

1

@ jeschafe Qui , e ancora niente

— Fady Kamal

1

posso chiederti perché vuoi farlo comunque? è un vantaggio concentrarsi sul clic per molte ragioni.

— Glyn Jackson,

@GlynJackson Si prega di controllare Modifica 1

— Fady Kamal

3

Non vedo il motivo del voto negativo. Mi sono imbattuto nello stesso problema. Tuttavia nel mio caso dovevo rendere il bordo rosso per indicare l'errore di convalida. Tuttavia, a causa del bagliore, era semplicemente invisibile.

— Oybek

144

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

— jeschafe
fonte

27

Puoi anche sovrascrivere l'impostazione Bootstrap predefinita per utilizzare i tuoi colori

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
fonte

3

vale la pena notare che il <select>selettore non è incluso qui.

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

imposta lo stile bootstrap sfocato

— Austin Greco
fonte

7

Dopo aver scavato un po ', penso che l'abbiano cambiato nell'ultimo bootstrap. Il codice seguente ha funzionato per me, la sua non semplice scatola è il controllo del modulo che stavo usando che stava causando il problema.

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

— crominazione
fonte

7

Vai a Personalizza Bootstrap , cerca @ input-border-focus, inserisci il codice colore desiderato, scorri verso il basso e fai clic su "Compila e scarica".

7

se pensi di non poter gestire la classe CSS, aggiungi semplicemente lo stile al campo di testo

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

— Dimgba Kalu
fonte

5

questo rimuoverà il bordo e l'ombra blu del fuoco.

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
fonte

4

Su bootstrap 3 c'è un piccolo top shodow su iOS, potrebbe essere rimosso con questo:

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

Capito da qui

— Chris
fonte

1

Guardando i commenti dal link che hai fornito, di solito è meglio usare "none" invece di "caret".

— Ryan Walton

2

I prefissi dei fornitori non sono necessari a questo punto, a meno che tu non supporti i browser legacy e potresti semplificare i tuoi selettori facendo riferimento a tutti gli input anziché a ciascuno dei singoli tipi.

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

— Melanie Seifert
fonte

0

HTML

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

CSS

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

— Savan Padaliya
fonte