當其他要素集中時，輸入失去焦點

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;
}

小提琴：

Answer 1

我認為您不能僅使用HTML和CSS。 您將需要一些類似以下的jquery代碼：

$(.block input[type=text]).on('focus', function(e) {
    $('.infront').show();
});

Answer 2

您還需要注意.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;
}