在输入字段中输入时如何更改电子邮件输入颜色

【问题标题】：how to change the email typing color when you type it in the input field在输入字段中输入时如何更改电子邮件输入颜色
【发布时间】：2021-12-27 10:32:38
【问题描述】：

当您在输入字段中输入时如何更改电子邮件输入颜色

 <form action="">
                
                <input type="email" name="mail" id="" placeholder="Your Email">
               
            </form>

【问题讨论】：

到目前为止你尝试了什么？
把id属性置空有什么意义？
您只想更改活动表单域的颜色吗？或者对于包含任何输入（但不为空）的字段？
这能回答你的问题吗？ How to edit HTML input value colour?

标签： html css forms

【解决方案1】：

<form>
    <input type="email" name="email" placeholder="Your Email..." />
</form>


input {
    border: 2px solid black;
}
input.typed {
    border: 2px solid red;
}

const input = document.querySelector("input");
input.oninput = function () {
    if (input.value.length == 0) input.classList.remove("typed");
    else input.classList.add("typed");
};

或者，如果您正在寻找点击和聚焦的时间，您可以使用 :focus，如下所示：

input:focus {
    border: 2px solid blue;
}

【讨论】：