3

http://www.me.comのようにアクティブなときに、HTML5 と CSS3 を使用してテキストフィールドにグロー効果を適用するにはどうすればよいですか

4

3 に答える 3

5

:focus { box-shadow: 0 0 10px red; }赤い輝きのために。基本的にグローは、適切な色でオフセットのないドロップ シャドウです。

于 2011-03-26T09:28:43.573 に答える
0

入力フィールドの後ろに移動し、フォーカスがない場合は非表示になる div に png 画像を使用します。すべての幅と高さが固定されているため、イメージのサイズ変更は必要ありません。

そこには CSS3 や HTML5 は見当たりませんでしたが、CSS3 を使用する場合は、border-image を使用するよりも、次のような同じ効果を得ることができるはずです。

border-image: url("border.png") 10;

編集：

@Lea Verouにはより良い解決策があります。昨日、このエフェクトを自分のサイトの 1 つにこのように追加しました

input:focus, textarea:focus,
input.ieFocusHack, textarea.ieFocusHack {
    box-shadow: 0 0 10px rgb(0, 182, 255);
    -moz-box-shadow: 0 0 10px rgb(0, 182, 255);
    -webkit-box-shadow: 0 0 10px rgb(0, 182, 255);
    behavior: url(PIE.htc);
}

input[type="submit"]:focus {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

:focus をサポートしていない IE 用の JavaScript (自分で書いたものではありません)。

$(document).ready(function() {
    if (jQuery.browser.msie === true) {
        jQuery('input, textarea')
                .bind('focus', function() {
                        $(this).addClass('ieFocusHack');
                }).bind('blur', function() {
                        $(this).removeClass('ieFocusHack');
                });
    }
});

box-shadow サポートを IE に追加するには、CSS3PIEを使用しました。魅力のように機能します。

于 2011-03-25T21:43:07.923 に答える
0

JavaScript と CSS3 の組み合わせを使用して、この効果を作成していることがわかります。

テキスト ボックスの状態を処理するイベント ハンドラーがありonfocus、CSS3box-shadowスタイルと Javascript のフェード効果を使用します。

これを達成するための最良の (最も簡単な) 方法は, jQuery を CSS3 プロパティと組み合わせることです. しかし, 生の JS で同時に行うこともできます. さらに説明が必要な場合は, コメントを残してください.

于 2011-03-25T21:10:26.833 に答える