以输入为中心的fieldset css

fieldset-css on input focused

本文关键字：fieldset css 为中心 输入      更新时间：2023-09-26

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

我现在想做的是将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（）"更好的方法吗？

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

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

你必须把你的CSS像这样：

.active {
// Css Code
}

我这样解决了它：

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

相关文章：