当单击submit按钮时,如果输入为空,可以通过以下方式更改输入样式:
:invalid
来匹配输入框为空的情况,并为其应用样式。例如:input:invalid {
border-color: red;
}
上述代码将使输入框的边框颜色变为红色。
document.querySelector('form').addEventListener('submit', function(event) {
var input = document.querySelector('input[type="text"]');
if (input.value.trim() === '') {
input.classList.add('error');
event.preventDefault(); // 阻止表单提交
}
});
上述代码将为输入框添加一个名为"error"的类,你可以在CSS中定义该类的样式。
<input type="text" required>
上述代码将在提交表单时自动验证输入框是否为空,并在为空时显示浏览器默认的错误提示。
以上是三种常见的方式来更改输入样式,具体选择哪种方式取决于你的需求和技术栈。关于前端开发、CSS、JavaScript等相关知识,你可以参考腾讯云的云开发产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云