CSS: 如何在移除焦点后保留样式

Question

我们有一些按钮的样式如下 CSS:

.btn-outline-primary {
  color: blue;
  border: 1px solid blue;
  background: transparent;
  transition: all 0.3s ease 0s;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
      background: blue;
      border: 1px solid blue;
      color: white;
    }

但是，一旦单击按钮，然后在页面上的其他任何地方发生单击，样式就会按预期消失。有没有办法让样式持续到专门单击另一个按钮？

Answer 1

听起来像 Javascript 可能需要在用户单击按钮时添加或删除 CSS 类。

Answer 2

不用JS也能做到：

input[name='btn-focus'] {
  display: none
}

.btn {
  display: inline-block;
  margin: 1em;
  padding: .5em 1em;
  color: blue;
  border: 1px solid;
  border-radius: .5em;
  background: transparent;
  transition: all 0.3s ease 0s;
}

.btn:hover,
:checked+.btn {
  background: blue;
  color: white;
}

<input type="radio" name="btn-focus" id="btn-focus1">
<label for="btn-focus1" class="btn">Button 1</label>
<input type="radio" name="btn-focus" id="btn-focus2">
<label for="btn-focus2" class="btn">Button 2</label>

CSS: 如何在移除焦点后保留样式

CSS: how to keep styles after focus is removed

css

focus

button

angularjs