聚焦时更改表单样式答案

【问题标题】：Change Form Styling When It's Focused聚焦时更改表单样式
【发布时间】：2011-08-31 16:47:34
【问题描述】：

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

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

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

#comment_form
{
    opacity: 0.7;
}

#comment_form:focus
{
    opacity: 1;
}

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

【问题讨论】：

【解决方案1】：

当表单内的 input 获得焦点时，您正试图更改 form 的不透明度。

你不能在 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 不可用时始终完全不透明。

【讨论】：

【解决方案2】：

:focus does not work so well in IE 5-8。

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

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

【讨论】：

如果我这样做，这意味着表单中的每个单独项目只有在该特定项目位于 focus 时才会改变其不透明度。我想要整个表单，这意味着其中的所有内容都可以更改 opacity。
哦，对不起。表单元素不支持焦点事件，因此您必须编写一个 JS 解决方案，afaik。你用 jquery 吗？