0

フィドル

#96f226テキストボックスの境界線をにしたいのですが、input:focusうまくいきます。しかし、別の場所をクリックしてもう一度クリックすると、緑色の境界線がなくなります。

CSS:

#input {
  background: #4a4a4a;
  border: 1px solid #454545;
  color: #96f226;
}
#input:hover {
  background: #656565;
}
#input:focus {
  outline: none;
  border: 1px solid #96f226
}

HTML:

<input type='text' id='input'>

編集：

クリックインして入力を開始し、クリックアウトしてからクリックインした場合にのみ、それは行われません。

4

1 に答える 1

1

これが発生する理由は、jQuery が 9 行目の入力にインライン スタイルを追加しているためです。

 $('#input').css('border', '1px solid #454545');

インライン スタイルは、スタイルシート内で定義されたスタイルをオーバーライドします。

!important簡単な修正は、CSSに追加することです。

#input:focus {
    outline: none;
    border: 1px solid #96f226 !important;
}

それは機能しますが、それはハックのようなものです。

私が正しく理解していれば、インラインスタイルを追加して、エラーの後に赤い境界線を削除しています。これを行うより良い方法は、単にインライン スタイルを削除することです。!importantこれにより競合が解決され、ハックを追加する必要がなくなります。jQuery の 9 行目を次のように置き換えます。

$('#input').css('border', '');
于 2013-11-06T00:02:59.613 に答える