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

Question

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

如何在选择其中一个按钮时设置背景颜色而不会在我单击屏幕上的其他位置时丢失选择？

在目前的方式中，单击按钮使其成为您选择的颜色，但单击屏幕的另一个区域returns 为原始颜色。

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 添加 class 或更改样式，就无法使用按钮执行此操作。

但是，您可以通过添加 :visited 样式来使用 <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>

缺点是即使您离开页面，它们也会保持黑色 return（除非用户清除了他们的浏览器历史记录）。

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

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>

Answer 2

如果不使用 JavaScript 就不可能在不遇到意想不到的副作用的情况下实现这一目标。

如果 visited 状态无关紧要甚至是需要的，请查看 @Blazemonger's 答案。

CSS pseudo-类 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 并且您的按钮点击没有返回 post，那么我会更改它，以便它使用单选按钮和标签（假设只有一个可以一次选择 - 如果可以选择多个，则将单选按钮更改为复选框）：

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

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

How to change Button CSS Color on Click

html

css

frontend

styles

angular-ui-bootstrap