Question

当仅使用 CSS 对输入字段进行聚焦时，是否有办法让<li>具有活动状态？如果没有，关于实现这一目标的最佳途径的任何建议？

在示例中，我希望当用户点击输入字段时，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不支持父选择器。因此，唯一的方法是使用jQuery，如jQuery parent method.

当使用css聚焦输入时，使LI具有活动状态

2 个答案: