如何在标签 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 你基本上捕获点击事件然后从当前活动选项中删除 class active，然后将 active class 添加到单击项目的 class 定义

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;
}

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

How to add focus on label css style

html

css

focus