90

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

編集1

jqueryプラグインTag-itを使用していて、Twitterブートストラップも使用しているため、これを実行したいのですが、プラグインは非表示のtextFieldを使用してタグを追加しますが、Twitterブートストラップを使用すると、内部に光るテキストボックスとして表示されます。少し奇妙なテキストボックス

4

12 に答える 12

144 
.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
于 2012-08-30T15:44:20.113 に答える
29

デフォルトのブートストラップ設定を上書きして、独自の色を使用することもできます

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);
}
于 2013-01-16T20:32:37.047 に答える
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;
}

焦点の合っていないスタイルをブートストラップするように設定します

于 2012-08-30T15:49:38.917 に答える
8

cssクラスを処理できないと思われる場合は、テキストフィールドにスタイルを追加するだけです。

<input type="text" style="outline:none; box-shadow:none;">
于 2012-10-27T01:12:40.510 に答える
8

いくつか掘り下げた後、彼らは最新のブートストラップでそれを変更したと思います。以下のコードは私のために機能しました、それは私が使用していたフォームコントロールの単純なボックスではなく、問題を引き起こしていました。 

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;
}
于 2014-05-06T14:34:29.660 に答える
7

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

于 2014-09-01T01:18:20.330 に答える
6

これにより、境界線とフォーカスの青い影が削除されます。

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/

于 2012-08-30T15:40:50.607 に答える
4

ブートストラップ3では、iOSに小さなトップショドウがあり、これで削除できます。

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

ここから手に入れた

于 2013-12-04T09:55:23.387 に答える
2

従来のブラウザーをサポートしている場合を除き、この時点ではベンダープレフィックスは必要ありません。個々のタイプのそれぞれではなく、すべての入力を参照するだけでセレクターを簡素化できます。

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}
于 2017-11-03T16:13:29.510 に答える
0

HTML

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

CSS

input:focus{
    border: 1px solid #ccc
}
于 2019-12-31T13:01:03.203 に答える
0 
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}
于 2020-11-01T06:56:27.783 に答える
0

これまでのところ、このスレッドで私を助けてくれた答えはありませんでした。私にとってそれを解決したのは

/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary, 
.btn-primary:focus {
    box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus, 
.btn-check:checked + .btn-primary:focus, 
.btn-primary.active:focus, 
.btn-primary:active:focus, 
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}
于 2022-01-12T14:02:56.560 に答える