如何使用 HTML5 和 CSS3 在文本字段上发光

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

想要改进这个问题？通过编辑这篇文章添加详细信息并澄清问题。

8 年前已关闭。

Answer 1

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

Answer 2

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

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

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

Answer 3

他们使用 png 图像作为 div，该图像被移动到输入字段后面，并在没有焦点时隐藏。所有东西都有固定的宽度和高度，因此不需要调整图像大小。

那里没有看到任何 CSS3 或 HTML5，但使用 CSS3 比使用 border-image 应该可以达到相同的效果，例如：

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

要向 IE 添加框阴影支持，使用了 CSS3PIE。就像魅力一样。