javascript - 专注于输入的 fieldset-css

Question

我有一些字段集，每个都有几个输入字段。

我现在要做的是将 CSS 样式应用于“活动”字段集。

通过“活动”，我的意思是字段集的输入元素之一被聚焦。

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

仅当我用鼠标悬停该字段时才应用此样式。但是当我在文本框中插入一些东西，而鼠标在其他地方时，我希望应用相同的 css 规则。

这对 css/css3 可行吗？或者有比为每个输入字段制作“onfocus”、“focusout()”更好的方法吗？

Answer 1

使用 css3 是不可能的，只有 javascript 可以做到这一点。你可以在 jQuery 中尝试类似的东西

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

你必须把你的 CSS 像这样：

.active {
// Css Code
}

Answer 2

我是这样解决的：

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