如何使用 HTML5 和 CSS3 在文本字段上发光 [关闭]答案

【问题标题】：How put glow on textfield using HTML5 and CSS3 [closed]如何使用 HTML5 和 CSS3 在文本字段上发光 [关闭]
【发布时间】：2011-03-25 21:03:54
【问题描述】：

当http://www.me.com@987654321 等活动时，我如何使用 HTML5 和 CSS3 在文本字段上添加发光效果

【问题讨论】：

+1。英语不好，但提出问题仍然很好。

标签： html css textfield glow

【解决方案1】：

:focus { box-shadow: 0 0 10px red; } 发出红光。本质上，辉光是具有合适颜色且没有偏移的阴影。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

他们为 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 支持。像魅力一样工作。

【讨论】：