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中

1 个答案: