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?

score 2 · Accepted Answer · answered Jul 16 '13 at 07:24

2

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
}

answered Jul 16 '13 at 07:24

Fabien Papet

2,244
2
25
52

score 1 · Answer 2 · answered Aug 27 '15 at 15:17

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

fieldset-css on input focused

2 Answers2

Linked