Substituir o bootstrap do Twitter Textbox Glow and Shadows

89

Quero remover o brilho azul da caixa de texto e da borda, mas não sei como substituir qualquer um dos js ou css dele, marque aqui

EDITAR 1

Quero fazer isso porque estou usando o plugin jquery Tag-it e também o bootstrap do twitter, o plugin usa um textField oculto para adicionar as tags, mas quando estou usando o bootstrap do twitter ele aparece como uma caixa de texto com brilho dentro de um caixa de texto que é um pouco estranha

— Fady Kamal
fonte

Você tem a capacidade de adicionar uma nova classe? Em caso afirmativo, basta adicionar uma nova classe comborder:none; box-shadow:none;

— jeschafe

1

@jeschafe Aqui , e ainda nada

— Fady Kamal

1

posso perguntar por que você quer fazer isso de qualquer maneira? é uma vantagem ter o foco no clique por vários motivos.

— Glyn Jackson

@GlynJackson Por favor, verifique a edição 1

— Fady Kamal

3

Não vejo o motivo do downvote. Eu tive o mesmo problema. Porém, no meu caso, precisei deixar a borda vermelha para indicar o erro de validação. No entanto, devido ao brilho, era simplesmente invisível.

— 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

Você também pode sobrescrever a configuração padrão do Bootstrap para usar suas próprias cores

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

é importante notar que o <select>seletor não está incluído aqui.

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

define para inicializar o estilo desfocado

— Austin Greco
fonte

7

Depois de fazer algumas pesquisas, acho que eles mudaram no bootstrap mais recente. O código abaixo funcionou para mim, não é uma caixa simples, o controle de formulário que eu estava usando que estava causando o 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;
}

— crominação
fonte

7

Vá para Personalizar Bootstrap , procure @ input-border-focus, digite o código de cor desejado, role para baixo e clique em "Compilar e baixar".

7

se você acha que não pode lidar com a classe css, então simplesmente adicione estilo ao campo de texto

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

— Dimgba Kalu
fonte

5

isso removerá a borda e a sombra azul do foco.

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

No bootstrap 3, há um pequeno shodow superior no iOS, que pode ser removido com isto:

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

Entendi daqui

— Chris
fonte

1

Olhando para os comentários do link que você forneceu, geralmente é melhor usar 'nenhum' em vez de 'acento circunflexo'.

— Ryan Walton

2

Os prefixos do fornecedor não são necessários neste ponto, a menos que você ofereça suporte a navegadores legados e possa simplificar seus seletores referindo-se apenas a todas as entradas em vez de a cada um dos tipos individuais.

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