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

Question

我有这个 HTML 标记：

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

li每当您关注子文本框时，我想通过 CSS 更改父级的样式。有没有办法用:focus选择器或其他选择器来做到这一点？还是我需要用 Javascript 来做这件事？

score 0 · Accepted Answer

我不知道如何在孩子集中注意力时使用css选择父母。但我只知道您可以通过 javascript 方式执行此操作。

对于 jQuery

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

希望这有帮助。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

尝试在您的 css 文件中使用它：

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

score 0 · Accepted Answer

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

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

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

4 回答 4