如何在标签 css 样式上添加焦点

Question

我正在尝试制作一个看起来像按钮的元素，里面有一个单选按钮。当用户选择一个选项时，我想在带有背景#CCC 的按钮上创建一个活动状态。

这里是相关代码。

.butOption {
  display: block;
  width: 400px;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.butOption:hover {
  background-color: #ccc;
}
.butOption input {
  margin: 20px;
  float: left;
  overflow: auto;
}

<label class="butOption">
  <div class="radioBut">
    <input type="radio" name="item" value="" checked />
  </div>
  <div class="text">
    <p>text</p>
    <p>text</p>
  </div>
</label>
<label class="butOption">
  <div class="radioBut">
    <input type="radio" name="item" value="" checked />
  </div>
  <div class="text">
    <p>text</p>
    <p>text</p>
  </div>
</label>

Answer 1

您可以使用 javascript 来执行此操作。我仍然无法找到仅使用 CSS 和 HTML 的方法。

(Demo)

使用 javascript，您基本上可以捕获单击事件，然后从当前活动选项中删除 active 类，然后将 active 类添加到单击项目的类定义中

JAVASCRIPT

document.getElementById("button1").onclick = function(){
    document.getElementsByClassName("active")[0].className = 'butOption';
    this.className += ' active';
};
document.getElementById("button2").onclick = function(){
    document.getElementsByClassName("active")[0].className = 'butOption';
    this.className += ' active';
};

CSS

.active {
    background: #CCC;
}