html - Css 按钮 :focus

Question

我想为我的按钮添加焦点，这样当有人点击一个按钮时，它就会改变颜色
我尝试了 .button:focus 但没有任何反应

这是我的片段。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;

}

.button {
  padding:0;
  margin:0;
  border:none;
  font-size:14px;
  background:#333;
  color: grey;
  height:50px;
  width:134px; 
  font-variant:small-caps;
}

.button:hover {
  padding:0;
  margin:0;
  border:none;
  font-size:14px;
  background:#333;
  color: #FF0000;
  height:50pxpx;
  width:134px; 
  text-decoration:none;
  font-variant:small-caps;
  background-color: #111;
}

.button:focus {
  background:blue;
}

<form action='' method="POST">
  <ul>
    <li><input type="submit" name="login" class="button" value="Login In"></li>
    <li><input type="submit" name="prodcuts" class="button" value="Products"></li>
    <li><input type="submit" name="question" class="button" value="Question"></li>
  </ul>
</form>

Answer 1

编织: http://kodeweave.sourceforge.net/editor/#9838274385f08a1729905c5274944518

:focus 仅适用于 input[type=text] 和 textarea 元素，但也适用于其他元素，如 div，如果它们具有 contentEditable。属性。

因此，对于 input[type=submit]、input[type=button] 或 button 元素的焦点将不起作用。

改为使用 :active

快速提示:您可以使用 W3C Markup Validation Service检查您的 HTML 是否有效。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #333;
}

li {
  float: left;
}

.button {
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 14px;
  background: #333;
  color: grey;
  height: 50px;
  width: 134px;
  font-variant: small-caps;
}

.button:hover {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 14px;
  color: #f00;
  height: 50px;
  width: 134px;
  text-decoration: none;
  font-variant: small-caps;
  background: #111;
}

.button:active {
  background: blue;
}

<form action='' method="POST">
  <ul>
    <li><input type="submit" name="login" class="button" value="Login In"></li>
    <li><input type="submit" name="prodcuts" class="button" value="Products"></li>
    <li><input type="submit" name="question" class="button" value="Question"></li>
  </ul>
</form>