问题
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?
回答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
}
回答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
来源:https://stackoverflow.com/questions/17670361/fieldset-css-on-input-focused