使用 css 聚焦输入时使 LI 处于活动状态答案

【问题标题】：Make LI have active state when input is focussed using css使用 css 聚焦输入时使 LI 处于活动状态
【发布时间】：2011-03-23 00:31:30
【问题描述】：

当输入字段仅使用 CSS 聚焦时，有没有办法使 <li> 具有 活动状态？如果没有，有什么关于实现这一目标的最佳方法的建议吗？

观看现场演示：http://jsfiddle.net/W5LzP/

在示例中，我希望LI 的背景颜色在用户单击输入字段时保持黄色。

示例HTML：

<ol>
    <li>
    <label for="first_name">Your first name</label>
    <input name="first_name" placeholder="Type Your First Name" /></li>

    <li>
    <label for="lastt_name">Your last name</label>
    <input name="last_name" placeholder="Type Your Last Name" />
    </li>

    <li>
    <label for="email_address">Your first name</label>
    <input name="email_address" placeholder="Type Your Email Address" />
    </li>

    <li>
    <label for="country">Your country</label>
    <input name="country" placeholder="Select your country from the drop down list" />         
    </li>
</ol>

示例 CSS：

ol li label{
    display:block;
}

ol li{
    margin-bottom:8px;
    background-color:#CCC;
}

ol li:hover{
    background-color:#090;
}

ol li:active{
    background-color:#FF9;
}

ol li input:focus{
    border:1px solid #99C;
    background-color:#99F;
}

【问题讨论】：

标签： html css input focus

【解决方案1】：

CSS 只能选择后代，它不能选择祖先（也许它应该出于您概述的原因）。

您必须使用 JavaScript，查看 parentNode 属性。

var inputs = document.getElementsByTagName('input');

for (var i = 0, inputsLength = inputs.length; i < inputsLength; i++) {

    inputs[i].onfocus = function() {
        this.parentNode.className += 'active';
    }

    inputs[i].onblur = function() {
        this.parentNode.className = this.parentNode.className.replace(/\bactive\b/, '');
    }

}

jsFiddle.

【讨论】：

感谢亚历克斯的链接。您能否提供一个示例/解释，说明我如何能够使用 parentNode 使我的上述示例正常工作？
刚刚查看了您的示例，它运行良好！非常感谢您的帮助=D
@Dan 不用担心，也许有一天他们会支持祖先选择:)
@alex，我们只能希望 =P 再次干杯！
@alex，只是一个朋友将您的 javascript 重写为 jQuery - 似乎工作得很好： $('input').focus(function () { $(this).addClass('active') ; }).blur(function () { $(this).removeClass('active'); });

【解决方案2】：

很遗憾，css 不支持父选择器。所以唯一的办法就是使用像 jQuery parent method.这样的javascript

【讨论】：

您应该考虑使用像 JQuery 这样的 JavaScript 框架，而不是直接使用 parentNode JavaScript 函数 - 因为它将在更广泛的浏览器中提供更一致的结果。
感谢乔丹的回答。如果您能够提供一个示例，说明如何使用 @Alex 所做的父方法来实现上述示例，我会为您提供答案。不过感谢您的意见。
@theTRON 哪些浏览器与parentNode不一致？