fieldset-css на сфокусированном входе

Question

У меня есть несколько полей, с несколькими полями ввода.

Теперь я хочу применить CSS-стиль к «активному» набору полей.

Под «active» Я имею в виду, что один из элементов ввода fieldset сфокусирован.

fieldset:hover{ 
    opacity: 1; 
    -webkit-box-shadow: 0px 0px 20px 0px rgba(100,100,100, 0.4); 
    box-shadow: 0px 0px 20px 0px rgba(100,100,100, 0.4); 
} 

Этот стиль применяется, когда я нахожу поле с помощью мыши. Но когда я вставляю что-то в текстовое поле, а мышь находится где-то в другом месте, я хотел бы использовать те же правила CSS.

Возможно ли это с помощью css/css3? Или есть ли лучшие способы, чем сделать «onfocus», «focusout()» для каждого поля ввода?

Answer 1

Это невозможно с помощью css3, только javascript может это сделать. вы можете попробовать в JQuery что-то вроде этого

$(".inputTextField").on("click",function(){ 
    $(this).parent().addClass("active"); 
}); 

вы должны поставить CSS, как это:

.active { 
// Css Code 
} 

Answer 2

Я решил так:

HTML

<fieldset onclick="this.setAttribute('class', 'active')"> 
    <input type="text" name="name" onblur="this.parentElement.classList.remove('active')"> 
    <input type="text" name="surname" onblur="this.parentElement.classList.remove('active')"> 
</fieldset> 

CSS

fieldset { 
    border: 3px solid green; 
} 

fieldset:hover, 
fieldset.active { 
    border-color: red; 
} 

JSFiddle