fieldset-css on input focused

浪子不回头ぞ 提交于 2019-12-08 01:44:35

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!