Question

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

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

“活跃”是指其中一个fieldset的输入元素是聚焦的。

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

有关输入的fieldset-css

2 个答案: