CSS：移除焦点后如何保持样式答案

【问题标题】：CSS: how to keep styles after focus is removedCSS：移除焦点后如何保持样式
【发布时间】：2020-03-09 17:43:15
【问题描述】：

我们有一些使用以下 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;
    }

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

【问题讨论】：

你需要使用 JS
该死....所以没有办法只使用 CSS 吗？
AFAIK CSS 无法记住状态和条件，但您可以轻松创建 CSS 类并使用 JS 有条件地应用

标签： css angularjs button focus

【解决方案1】：

当用户点击按钮时，可能需要使用 Javascript 来添加或删除 CSS 类。

【讨论】：

【解决方案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>

【讨论】：