首页 > 解决方案 > 在输入字段中输入时如何更改电子邮件输入颜色

问题描述

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

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

 

标签: htmlcssforms

解决方案


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

推荐阅读