他の要素がフォーカスされていると入力がフォーカスを失う

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

Answer 2

私はHTMLとCSSだけではできないと思います。次のようなjqueryコードが必要です。

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