Anular el brillo y las sombras del cuadro de texto bootstrap de Twitter

88

Quiero eliminar el brillo azul del cuadro de texto y el borde, pero no sé cómo anular ninguno de los js o css, marque aquí

EDITAR 1

Quiero hacer esto porque estoy usando el complemento jquery Tag-it y también estoy usando twitter bootstrap, el complemento usa un textField oculto para agregar las etiquetas, pero cuando estoy usando twitter bootstrap aparece como un cuadro de texto con brillo dentro de un cuadro de texto que es un poco extraño

— Fady Kamal
fuente

¿Tiene la posibilidad de agregar una nueva clase? Si es así, agregue una nueva clase conborder:none; box-shadow:none;

— jeschafe

1

@jeschafe Aquí , y todavía nada

— Fady Kamal

1

¿Puedo preguntar por qué quieres hacer esto de todos modos? Es una ventaja tener un enfoque en el clic por muchas razones.

— Glyn Jackson

@GlynJackson Por favor revise la Edición 1

— Fady Kamal

3

No veo el motivo del voto negativo. Me encontré con el mismo problema. Sin embargo, en mi caso, necesitaba que el borde fuera rojo para indicar el error de validación. Sin embargo, debido al brillo, era simplemente invisible.

— Oybek

143

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

— jeschafe
fuente

27

También puede anular la configuración predeterminada de Bootstrap para usar sus propios colores

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
fuente

3

Vale la pena señalar que el <select>selector no se incluye aquí.

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

establece para arrancar el estilo desenfocado

— Austin Greco
fuente

7

Después de investigar un poco, creo que lo cambiaron en el último arranque. El siguiente código funcionó para mí, no es un cuadro simple, el control de formulario que estaba usando, lo que estaba causando el 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;
}

— crominación
fuente

7

Vaya a Personalizar Bootstrap , busque @ input-border-focus, ingrese el código de color deseado, desplácese hacia abajo y haga clic en "Compilar y descargar".

7

si cree que no puede manejar la clase css, simplemente agregue estilo al campo de texto

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

— Dimgba Kalu
fuente

5

esto eliminará el borde y la sombra azul de enfoque.

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
fuente

4

En bootstrap 3 hay un pequeño top shodow en ios, podría eliminarse con esto:

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

Lo tengo de aqui

— chris
fuente

1

Al mirar los comentarios del enlace que proporcionó, generalmente es mejor usar 'ninguno' en lugar de 'intercalación'.

— Ryan Walton

2

Los prefijos de proveedores no son necesarios en este momento, a menos que sea compatible con navegadores heredados, y podría simplificar sus selectores simplemente haciendo referencia a todas las entradas en lugar de a cada uno de los tipos individuales.

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

— Melanie Seifert
fuente

0

HTML

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

CSS

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

— Savan Padaliya
fuente

0

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}

— Pradip
fuente