如果输入有效,请更改按钮颜色

Question

如果输入有效(填写必填字段),我想更改按钮的颜色.如果没有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>

Answer 1

您可以考虑使用有效的语法

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