web-dev-qa-db-ja.com

Twitter bootstrap Textbox Glow and Shadowsをオーバーライドする

テキストボックスと境界線の青い輝きを削除したいのですが、jsまたはcssをオーバーライドする方法がわかりません、 ここ を確認してください

EDIT 1

Jqueryプラグイン Tag-it を使用しており、Twitter bootstrapも使用しているため、プラグインは隠しtextFieldを使用してタグを追加しますが、 Twitter bootstrapを使用している

javascriptjqueryhtmlcsstwitter-bootstrap
86
Fady Kamal
.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
139
jeschafe

デフォルトのBootstrap設定をオーバーライドして、独自の色を使用することもできます

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

bootstrap unfocusedスタイルに設定します

10
Austin Greco

カスタマイズブートストラップ に移動し、@ input-border-focusを探し、希望のカラーコードを入力し、下にスクロールして[コンパイルとダウンロード]をクリックします。

7
user2481398

cSSクラスを処理できないと思われる場合は、単にテキストフィールドにスタイルを追加してください

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

掘り下げた後、最新のブートストラップで変更したと思います。以下のコードは私のために働いた、そのシンプルなボックスではなく、私が使用していたフォームコントロールが問題の原因でした。

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

これにより、境界線とフォーカスブルーシャドウが削除されます。

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/

5
Glyn Jackson

bootstrap 3には、iosに小さなトップシャドウがありますが、これで削除できます。

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

here から取得しました

4
chris

レガシーブラウザーをサポートしていない限り、この時点ではベンダープレフィックスは不要です。個々のタイプではなく、すべての入力を参照するだけでセレクターを簡素化できます。

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