如果输入有效，则更改按钮颜色答案

【问题标题】：Change button color if input is valid如果输入有效，则更改按钮颜色
【发布时间】：2018-09-02 06:09:12
【问题描述】：

如果输入有效（必填字段已填写），我想更改按钮的颜色。如果没有 javascript，只使用 CSS 和 HTML，我该如何实现呢？

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

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

【问题讨论】：

标签： html css forms validation

【解决方案1】：

您可以考虑使用valid 语法

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

#myForm:valid .button {
  background : green;
}

<div class="wrapper">
    <main class="main">
        <h2>Login</h2>
        <form id="myForm" 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>

【讨论】：

你通过证明我错了，强迫我删除我的评论。干得好，点个赞。