7

ユーザーがフィールドをクリックしたときにフォームフィールドに色の境界線を追加しようとしています。HTMLとJavaScriptが得意で、少しphpがありますが、cssは実際にはかなり貧弱です。フォーム等のコードは以下のとおりです。誰かが私を指示したり助けてくれたら本当にありがたいです。コード：

<form id="search" action="http://www.bkslap.com/search/results.php" id="cse-search-box">
<input name="q" type="text" id="q" autocomplete="on" size="56"  style="color:#ccc;" maxlength="128" id="q"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#ccc';"
onfocus="this.value=''; this.style.color = '#9933FF';"
value="Search" />
</form>

何かご意見は？

4

7 に答える 7

12

onBlur と onFocus を使用してクラスを追加および削除する方がおそらくクリーンです。次に、css クラスで次のようにすることができます。

.focus {
background: yellow;
color: #000;
border: 1px solid red;
}

境界線のプロパティの詳細については、こちらを確認してください。(w3schools を嫌う人には申し訳ありませんが、この種の参照には妥当な場所です)。

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

于 2011-01-05T21:14:16.950 に答える
10

次のように、輪郭の色に css を使用するだけです。

.class {
    outline-color:#FF0;
}
于 2012-09-27T18:36:49.897 に答える
7

疑似クラスを使用できますが、ここhttp://www.quirksmode.org/css/contents.htmlでわかるように、 :focusIE7以下ではサポートされていません。ブラウザ間の互換性を実現するには、jqueryと次のコードを使用できます#q:focus {border:red 1px solid;}

$('#q').focus(function() {
    $('#q').css('border','1px solid red');
});
于 2011-01-05T21:17:26.183 に答える
1 
input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
    border-color: #81256f;
    box-shadow: none;
}

この CSS を使用します。これはあなたのために仕事をします。上記のCSSを使用すると、次の出力が得られました。 ここに画像の説明を入力

これがお役に立てば幸いです:-)

于 2018-08-30T05:11:08.117 に答える
0

このようなインライン スタイルの使用はお勧めしません。javascript/jquery を介してイベントを接続することもお勧めしますが...

object.style.borderColor で背景色を設定できます。色は文字色のみです。

省略形の CSS マークアップは単なる「border」です。具体的には、css から境界線の色を設定する場合は「border-color」です。this.style.borderColor に変わる JavaScript では。

于 2011-01-05T21:15:46.800 に答える