テキストボックスにフォーカスしているときに、どのように明るい効果を出すことができますか？フォーカスされているときにテキストボックスを明るくするにはどうすればいいですか？
Twitterのログインページでは、既に明るいテキストボックスが実装されています。
私はそれを実装する方法が不思議です。
アイデア？純粋なCSS？またはフォーカスイベントを処理するいくつかのjavascriptとaddClass removeClass？
あなたの質問はどのように、jQueryを使ってタグ付けされ、フォーカスイベントをキャッチすると考えられていたので、私がjavascriptの低いものを実装するのではなく、純粋なJavaScriptで実装するjQueryの道:)
：
をすることを忘れないでくださいinput:focus {
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 0 10px rgba(255, 255, 255, 0.9)
}
要素をフォーカスするときにスタイルの変更を処理するために必要なJavaScriptはありません。
を好む：ちょうど
$("#yourTb").focus(function(){
$(this).css("background-color", "yellow");
});
Twitterのは、単純なCSS3ボックスシャドウでこれを実装
$("#yourTb").blur(function() {
$(this).css("background-color", "white");
});
これは、jQueryだけでなく、Javascriptをまったく使用しないCSSでも実行できます。 – Interrobang
@Interrobang - はい、できますが、質問はjQueryでタグ付けされていますので、これは不適切な答えにはなりません。 –
それはもう正しくはありません。ソリューションにはJavascriptが重いだけでなく、プレゼンテーションスタイルをビジネスロジックにミックスしています。最低限、jQueryを使用して、CSS属性を盲目的に設定するのではなく、クラスを切り替えることができます。 – Interrobang
また、テキストボックスのonFocusイベントに関数を書くこともできます。その関数の中では、テキストフィールドのCSSクラスを変更するだけです。このようなものがあります <input type=Text onfocus=change()/><script>function change(){// Code to change the class}</script> これは役に立ちます。
それはあなたがそれを盲目的に使用すべきではない理由です:)あなた自身のスタイルを入れて - 私はTwitterがCSS：focusセレクタをどのように使っているかをあなたに示しています。 – Interrobang
テストするブラウザはどれですか？正しく動作させるためには、最新のブラウザ（IE6から8ではなく）が必要です。 –
上記のスタイルのdef（rgb）を視覚的な好みに合わせて微調整することができます。しかし一般的に、これはあなたが求めたものを達成する最も適切な方法です。 – techfoobar