在聚焦时更改表单样式

Question

我有一个评论表单，我将该表单的 opacity 设置为 0.7

现在我想将 opacity 更改为 1 code> 仅当用户填写该表单时。我怎样才能做到这一点？

我尝试在表单 id 上使用 :focus 选择器，但它似乎根本不起作用。

#comment_form
{
    opacity: 0.7;
}

#comment_form:focus
{
    opacity: 1;
}

或者也许还有其他方法可以实现这一点，这将是更好的解决方案？ （比如可能使用 Javascript？）

Answer 1

当表单内的输入获得焦点时，您尝试更改该表单的不透明度。

您无法根据 CSS 中的后代元素来选择元素，因此这需要 JavaScript。

例如，（未经测试的）YUI 3 方法将是：

var form = Y.one('#comment_form');
form.delegate('focus', function (e) { 
    form.addClass('focused');
}, 'input');

然后：

#comment_form.focused
{
    opacity: 1;
}

您将需要类似的模糊事件代码，我建议添加一个类以使用 JS 使其半透明，这样如果 JS 不透明，它始终是完全不透明的可用的。

Answer 2

:focus 在 IE 5-8 中效果不佳。

无论如何， :focus 伪类应该位于各个输入元素上，例如 textarea、input 等，而不是整个表单。

编辑：有关此问题的基本解决方案，请参阅此小提琴。