当它聚焦时改变表单样式

Question

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

现在我只想在用户填写该表单时将opacity更改为1。我怎么能这样做？

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

#comment_form
{
    opacity: 0.7;
}

#comment_form:focus
{
    opacity: 1;
}

或许还有其他方法可以实现这个更好的解决方案？ （比如可能使用Javascript？）

Answer 1

当您关注该表单中的输入时，您正尝试更改表单的不透明度。

您无法根据CSS的后代选择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 does not work so well in IE 5-8。

无论如何，：focus伪类应该在各个输入元素上，如textarea，input等，而不是整个形式。

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