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

Question

当仅使用 CSS 聚焦输入字段时，是否有办法使

具有活动状态？如果没有，关于实现这一目标的最佳方法有什么建议吗？

查看现场演示：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;
}

Answer 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。

Answer 2

不幸的是 css 不支持父选择器。
因此，唯一的方法是使用 javascript，如 jQuery parent 方法。