如何仅通过CSS和HTML实现输入验证通过时更改按钮颜色？

没问题！咱们可以借助CSS的:valid伪类特性，配合HTML表单的原生验证能力，轻松实现这个需求——完全不需要写一行JavaScript代码。

原理说明 #

HTML表单里带required属性的必填字段会自动触发原生验证，当所有必填字段都填写合法时，整个<form>元素会匹配:valid伪类状态。我们可以利用这个状态，通过CSS后代选择器来修改提交按钮的样式。

修改后的完整代码 #

HTML部分

<div class="wrapper">
 <main class="main">
 <h2>Login</h2>
 <form method="POST" action="main.html">
 <label for="username"><b>Username:</b></label>
 <input id="username" type="text" placeholder="Username" required/><br/>
 <label for="password"><b>Password:</b></label>
 <input id="password" type="password" placeholder="Password" required/><br/>
 <input class="button" type="submit" value="Login" /><br/>
 </form>
 </main>
</div>

CSS部分

.wrapper { 
  display: flex; 
  flex-flow: row wrap; 
  text-align: center; 
  background: linear-gradient(to bottom, #F4F6F9, #D3D8E8); 
  font-family: Arial; 
}

/* 提交按钮初始样式 */
.button {
  background-color: #ccc; /* 初始灰色，提示不可用 */
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: not-allowed; /* 初始不可点击状态的光标样式 */
  transition: background-color 0.3s ease; /* 颜色过渡动画 */
}

/* 表单验证通过时的按钮样式 */
form:valid .button {
  background-color: #4CAF50; /* 验证通过后切换为绿色 */
  cursor: pointer; /* 恢复可点击的光标样式 */
}

细节补充 #

• 添加transition属性让颜色变化更平滑，提升用户体验
• 初始状态的cursor: not-allowed能直观告诉用户按钮暂时不可用，验证通过后恢复正常光标
• 这个方案还兼容HTML原生的其他验证规则（比如email类型的格式校验），只要表单整体处于:valid状态，按钮样式就会更新

内容的提问来源于stack exchange，提问作者Steve2Fish