激活时的输入样式答案

【问题标题】：Input Styling on Active激活时的输入样式
【发布时间】：2021-04-05 22:23:16
【问题描述】：

我正在为网站制作表单，并希望在字段填充文本时更改字段的边框颜色。我在想我可以简单地通过添加一个 :active 状态来做到这一点，但这似乎不起作用......

HTML

<form>
 <label for="fname">First name:</label><br>
 <input type="text" placeholder="First name" id="fname" name="fname">
   <label for="lname">Last name:</label><br>
   <input type="text" placeholder="Last name" id="lname" name="lname">
</form>

CSS

input {
 border: none;
 outline: none!important;
 padding: 10px 20px;
 width: 300px;
}

input[type=text] {
 color: #1a1a1a;
 border-bottom: 4px solid #1a1a1a;
 font-size: 24px;
 font-weight: 900;
}

input[type=text]:focus {
  border-bottom: 4px solid #178926;
}

【问题讨论】：

在这个旧的所以线程中包含一些信息，我猜：stackoverflow.com/a/35302732/3787407 .. 只需使用 input:not(:placeholder-shown) 来设置文本输入样式。

标签： css forms border pseudo-element

【解决方案1】：

要实现这一点，您需要添加一些脚本。我通过使用它给出了下面的脚本，您将实现您的目标。在脚本中添加以下代码：

    document.querySelectorAll('input').forEach((input) => {
        input.addEventListener('blur', function() {
            this.classList.toggle('green', this.value.length > 0);
        });
    });

在 CSS 中添加以下代码：

.green {
    border: 2px solid blue;
}

通过使用此 CSS 属性，您可以操作边框属性。此代码对所有输入元素都很有用。

【讨论】：