html - 在 css 中聚焦一个元素

Question

是否可以使显示后隐藏的输入成为焦点。 我有一个复选框:

<div class="search">
    <input type="checkbox" id="toggle" >
    <input type="text" class="search-input" placeholder="Type in...">
    <label for="toggle"><i class="fa fa-search"></i></label>
</div>

选中复选框后，出现搜索输入。

input[type=checkbox]:checked ~ input.search-input {
    width: 100px;
    opacity:1;
    border: none;
    -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.3);
    user-focus: normal;
    transition: all .5s;
}

是否可以在纯 css 中使此输入在出现后成为焦点？ 我只需要纯 css，我知道可以用 javascript 制作。

Answer 1

没有。仅靠 CSS 无法做到这一点。

请注意，如果您要使用 jQuery，您可以像这样使用一个相当简单的更改事件:

$('#toggle').on('change', function(){
    $('.search-input').focus();
});

编辑:我刚刚看到您的评论说您的学校不允许 JS。这很令人困惑，因为没有它是不可能的。这并不适用，但有 HTML5 autofocus attribute . (不适用，因为它只是在页面加载时)