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: url("border.png") 10;

编辑：

@Lea Verou 有更好的解决方案。我昨天像这样将这种效果添加到我的一个网站

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;
}

一些用于 IE 的 javascript（不是我自己写的），因为它不支持 :focus

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

使用CSS3PIE为 IE 添加 box-shadow 支持。奇迹般有效。

于 2011-03-25T21:43:07.923 回答
0

您会发现他们使用 JavaScript 和 CSS3 的组合来创建这种效果。

他们将有一个事件处理程序来处理onfocus文本框的状态，然后使用 CSS3box-shadow样式以及 Javascript 淡入淡出效果，

实现这一点的最佳（最简单）方法是将 jQuery 与 CSS3 属性结合起来，但也可以同时在原始 JS 中完成，如果您需要进一步解释，请发表评论。

于 2011-03-25T21:10:26.833 回答