Html 关注文本框时更改文本框父项的样式

我有以下HTML标记：

<ul>
    <li>
        <input type="text">
    </li>
    <li>
        <input type="password">
    </li>
</ul>

---

每当您关注子文本框时，我想通过CSS更改父

li

的样式。有没有办法用

：focus

选择器或其他选择器来实现这一点？或者我需要用Javascript来实现这一点吗？

我不知道如何使用css在孩子聚焦时选择家长。 但我只知道用javascript的方式可以做到这一点

对于jQuery

$('input').on('focus', function(){  
    $(this).parent().css(/* the css you want to change */)
})

希望这有帮助

$( "input" ).focus(function() {
$( this ).parent().css( "list-style", "none" );
});

---

请参见

聚焦Li的最佳方式，最好使用图像或更改边框颜色，这取决于您对如何使用它的想法

尝试在css文件中使用此选项：

ul {list-style-type:none;}
input {border:10px solid yellow;}
input:focus {border:10px solid green;}

---

扩展我的初始注释：css没有父选择器

如果您的目标是突出显示具有焦点的输入，解决方法是为每个输入提供一个厚边框：

ul {list-style-type:none;}
input {border:20px solid green;}
input:focus {border:20px solid red;}

---

演示：

对每个输入应用厚边框怎么样？演示：