html - 使用 css 使输入集中时使 LI 具有事件状态

Question

有没有办法制作<li>仅使用 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属性(property)。

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 .