我正在尝试制作一个看起来像按钮的元素,其中包含一个单选按钮。当用户选择一个选项时,我想在带有背景#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>
最佳答案
您可以使用 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;
}
关于html - 如何在标签 css 样式上添加焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29996585/