javascriptcssfieldset

fieldset-css on input focused

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?

Solution

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