вход потерять фокус, когда другой элемент сфокусирован

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