将元素集中在 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。（不适用，因为它只是在页面加载时）

将元素集中在 css

focus an element in css

html

css

focus

input