fieldset-css on input focused

Question

I have some fieldsets, with several input-fields each.

What I now want to do is to apply a css-style to an "active" fieldset.

By "active" I mean that one of the fieldset's input-elements is focused.

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

This style is only applied, when I hover the field with the mouse. But when I insert something in a text-box, and the mouse is somewhere else, I would like to have the same css-rules applied.

Is this possible with css/css3? Or are there better ways than to make an "onfocus", "focusout()" for each input-field?

Answer 1

It is not possible with css3, only javascript can do this. you can try in jQuery something like that

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

you have to put your CSS like That :

.active {
// Css Code
}

Answer 2

I solved it like this:

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

Answer 3

The new :focus-within pseudo-class does exactly this from the selectors level 4 specification of css and it seems to have widespread support across all major browsers.

<label>
  Name:
  <input type="text" />
</label>

label:focus-within {
  font-weight: bold;
}