当我按下带有CSS3的按钮时,将文本输入设置为焦点

我在页面上有一个搜索按钮,当用户按下搜索按钮时,搜索栏进入屏幕,我也想将输入设置为焦点.我可以用纯CSS3做到这一点吗？

这是代码:

在这里你可以看到CSS样式,以便搜索栏被推离屏幕:

#Search_Box {
    position: absolute; 
    width: 100vw;
    height: 8vh;
    background-color: #38D1A9;
    transform: translate3d(0, -8vh, 0);
    transition: transform .2s ease-out;
}

这是下拉的搜索框:

所以这就是问题所在.我显示了一个搜索图标.当按下搜索图标时,它会关闭其中包含搜索输入的"Search_Box".我想,当按下该搜索图标时,立即使该搜索框成为焦点.

标签技术的问题在于,虽然它完全按预期工作,但搜索图标已经在标签内(它位于里面的标签是将搜索框放入视图中),所以我将无法包装它在另一个标签.

我试着这样做:

#Search_Button:checked ~ div #Search_Input {
    cursor: pointer;
}

我试过说当检查Search_Button时,它会使搜索输入成为焦点,但绝对不是这样做的.我试图避免使用JS,因为我正在使用移动设备.

我真的为任何困惑道歉!

您可以通过将label元素与input元素相关联来实现本机HTML行为.将label元素的for属性设置为等于input元素id属性值.当label被点击的元素,该input元素将被重点.

没有JavaScript的示例:

label {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  padding: 1px 6px;
}

Button
Other elements...