html - 提交点击出错时更改输入颜色

Question

如果点击提交按钮时出现错误，如何将输入框的颜色更改为红色？

<form method="post" action="" ">
        <h3>Add users</h3>

        <div class="form-group <?php echo (!empty($error_user) || ($error_taken)) ? 'has-error' : ''; ?>">
  <strong>Username: *</strong>
  <input type="text" name="username" value="<?php echo $username; ?>" />
  <span class="error"><?php echo $error_user; ?></span><br/>
  <span class="error"><?php echo $error_taken; ?></span><br/>
  </div>

  <div class="form-group <?php echo (!empty($error_name)) ? 'has-error' : ''; ?>">
    <strong>Name: *</strong>
    <input type="text" name="name" value="<?php echo $name; ?>" />
    <span class="error"><?php echo $error_name; ?></span> <br/>
  </div>

  <div class="form-group <?php echo (!empty($error_pass)) ? 'has-error' : ''; ?>">
    <strong>Password: *</strong>
    <input type="text" name="password" value="<?php echo $password; ?>" />
    <span class="error"><?php echo $error_pass; ?></span> <br/>
  </div>

  <input type="submit" name="submit" value="Add">

</form>

Answer 1

你可以使用简单的 CSS

.form-group.has-error input {
  border: 1px solid red;
}