在关注文本框时更改文本框父级的样式

Question

我有这个HTML标记：

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

每当您专注于子文本框时，我想通过CSS更改父li的样式。有没有办法用:focus选择器或其他选择器执行此操作？或者我需要使用Javascript进行此操作吗？

Answer 1

我不知道如何使用css选择父级时他们的孩子在焦点上。 但我只知道你可以用javascript方式做到这一点。

for jQuery

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

希望得到这个帮助。

Answer 2

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

请参阅http://jsfiddle.net/SGETp/6/

Answer 3

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

尝试在css文件中使用它：

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

Answer 4

要扩展我的初始评论：css没有父选择器。

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

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

演示：http://jsfiddle.net/dgXcE