html - 单击后提交按钮保持悬停颜色

Question

在我单击“提交”或“重置”按钮后，按钮颜色保持悬停颜色并且不会返回到原始“预单击”按钮颜色，直到您单击页面中的其他位置。

我基本上希望按钮颜色在单击后变回原始颜色。谁能建议如何做到这一点？

CSS/HTML:

.form input:focus {
  background: #FFFFAD;
  outline: none;
}
.buttons {
  text-align: left;
}
.buttons input {
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Arial", serif;
  padding: 8px 40px;
  background: #4470B6;
  border: 0px;
  margin-left: 0px;
  margin-right: 50px;
  margin-top: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  color: #FFFAFA;
}
.buttons input:hover,
.buttons input:focus {
  background-color: #50627E;
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}

<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>

Answer 1

我假设您正在设置焦点按钮的样式以去除轮廓，因此只需将选择器分成 2 个并在焦点上仅删除轮廓:

.form input:focus {
  background: #FFFFAD;
  outline: none;
}
.buttons {
  text-align: left;
}
.buttons input {
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Arial", serif;
  padding: 8px 40px;
  background: #4470B6;
  border: 0px;
  margin-left: 0px;
  margin-right: 50px;
  margin-top: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  color: #FFFAFA;
}
.buttons input:hover
{
  background-color: #50627E;
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
.buttons input:focus {
  outline: none;
}

<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>