如何在单击时更改按钮CSS颜色

Question

我有以下按钮，当它们悬停在上面时会发生变化。

当我点击屏幕上的其他地方时，如何在选择其中一个按钮的同时不丢失选择时设置背景色？

以当前的方式，单击按钮使其成为您选择的颜色，但单击屏幕上的另一个字段返回到原来的颜色。

​

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
}

button:hover {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<button id="scale-0" class="btn-scale-0">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3">&nbsp;3&nbsp;</button>

​

Answer 1

如果您不想使用javascript，并且您的按钮单击不回发，那么我会更改它，以便它使用单选按钮和标签(假设一次只能选择一个--如果多个可以，那么就为一个复选框更改收音机)：

​

.scale {
  /* hide radio button */
  position: fixed;
  left: 100%;
  top: 100%;
}

.button {
  display:inline-block;
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: black;
  color: white;
}

.scale:checked + label {  
  /* selected styled */
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input id="scale0" class="scale" name="scale" type="radio" value="0" checked>
<label for="scale0" class="button">&nbsp;0&nbsp;</label>
<input id="scale1" class="scale" name="scale" type="radio" value="1">
<label for="scale1" class="button">&nbsp;1&nbsp;</label>
<input id="scale2" class="scale" name="scale" type="radio" value="2">
<label for="scale2" class="button">&nbsp;2&nbsp;</label>
<input id="scale3" class="scale" name="scale" type="radio" value="3">
<label for="scale3" class="button">&nbsp;3&nbsp;</label>

​

Answer 2

如果不使用JavaScript，就不可能实现这一目标，而不会出现意外的副作用。

如果visited状态不重要，甚至不需要，请查看@Blazemonger's答案。

CSS伪类focus和active是通过单击页面其他位置时失去其状态来定义的。

JavaScript(+JQuery)解决方案：

​

$("#scale-0").click(function() {
  $("#scale-0").addClass('button-clicked');
});
$("#scale-1").click(function() {
  $("#scale-1").addClass('button-clicked');
});
$("#scale-2").click(function() {
  $("#scale-2").addClass('button-clicked');
});
$("#scale-3").click(function() {
  $("#scale-3").addClass('button-clicked');
});

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
}

button:hover{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

.button-clicked {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="scale-0" class="btn-scale-0 btn">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1 btn">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2 btn">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3 btn">&nbsp;3&nbsp;</button>

​

Answer 3

我认为在不使用JavaScript添加类或更改样式的情况下，使用按钮无法做到这一点。

但是，您可以通过添加一个<a href>样式来实现这一点：

​

.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
  text-decoration:none;

}

.button:hover,.button:active,.button:visited{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

<a href="#scale-0" id="scale-0" class="button btn-scale-0">0</a>
<a href="#scale-1" id="scale-1" class="button btn-scale-1">1</a>
<a href="#scale-2" id="scale-2" class="button btn-scale-2">2</a>
<a href="#scale-3" id="scale-3" class="button btn-scale-3">3</a>

​

缺点是，即使您离开页面并返回(除非用户清除其浏览器历史记录)，它们仍将是黑色的。

下面是使用不可见复选框而不是按钮的第二种方法。但是，这也有一个缺点，即用户可以再次单击按钮以撤消颜色更改：

​

input[type=checkbox][id^=scale-] {
  display: none;
}
.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;

}
input[type=checkbox][id^=scale-]:checked + .button,
.button:hover,
.button:active,
.button:visited {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input type="checkbox" id="scale-0"><label for="scale-0" class="button btn-scale-0">0</label>
<input type="checkbox" id="scale-1"><label for="scale-1" class="button btn-scale-1">1</label>
<input type="checkbox" id="scale-2"><label for="scale-2" class="button btn-scale-2">2</label>
<input type="checkbox" id="scale-3"><label for="scale-3" class="button btn-scale-3">3</label>

​