html - 当其他元素获得焦点时输入失去焦点

Question

我正在尝试仅使用 CSS 和 HTML 创建自定义组件。组件的行为类似于:当输入被选中(有焦点)时，另一个容器被打开。问题是当容器打开时输入失去焦点并且容器在第一次点击时关闭 :(

那么，当我聚焦在打开的容器上时，如何让输入聚焦？

<div class="block">
    <label>Field</label>
    <input type="text" tabindex="-1"/>
    <div tabindex="-1" class="infront">
         Keep this bastard open.<br/>
        <br/>
        while clicking on this div
    </div>
</div>

CSS

.block{
    position: relative;
    display: inline-block;
    margin: 50px;
}

.infront{display: none;}

.block input[type="text"]:focus ~ .infront {
    display: block;
    position: absolute;
    top:100%;
    width: 80%;
    right: 0;
    background: #ccc;
    opacity:0.8;
}

Fiddle:

Answer 1

您还需要处理 .infront 容器状态的状态。

为此更新您的 CSS

.block input[type="text"]:focus ~ .infront
, .infront:hover
, .infront:active 
, .infront:focus {
    display: block;
    position: absolute;
    top:100%;
    width: 80%;
    right: 0;
    background: #ccc;
    opacity:0.8;
}