所以我想要的效果是点击它后保持绿色。目前，它仅在您悬停时变为绿色，但只要我将其悬停，它就会关闭。这只发生在我的电脑浏览器上。它似乎在手机游戏中运行良好....我错过了什么？
.hentry p label{
border-style:solid;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
border-width:1px;
border-color:#ffffff;
display: inline;
background: #00c6c6;
padding-left:0px;
padding-top:0px;
color: #fff;
font-style:normal;
text-align:center;
letter-spacing:0.2px;
word-wrap:normal;
padding-right:0px;
margin-left:25px;
margin-right:-13px;
line-height:57.9px;
font-size:21px;
float: left;
}
这个浮动有一个警告，但是当我运行它时，所有显示都很好。
.page-id-819 .hentry
label:after,
label:hover, label:active,
input:target, input:hover+label,
input:active+label, input:focus+label
{
background:green !important;
}
仅供参考，这是一个转向按钮的电台选择。
提前致谢
编辑。这是HTML
<form action="" method="get">
<fieldset>
<strong>Amount</strong>
<input id="1" type="radio" name="qty" value="1">
<label for="1">1</label>
<input id="2" type="radio" name="qty" value="2">
<label for="2">2</label>
<input id="3" type="radio" name="qty" value="3">
<label for="3">3</label>
<input id="4" type="radio" name="qty" value="4">
<label for="4">4</label>
</fieldset>
<fieldset>
<strong>state</strong>
<input id="save_now" type="radio" name="now" value="now">
<label for="save_now">Save state now</label>
<input id="save_later" type="radio" name="later" value="later">
<label for="save_later">Save state later</label>
</fieldset>
<input type="submit">
</form>
你去，我希望你觉得这很有用
fieldset {
line-height: 30px;
}
fieldset input[type="radio"]+label,
input[type="submit"],
fieldset {
border: 1px solid #047bc1;
border-radius: 3px;
margin: 2px 1px;
}
fieldset input[type="radio"]+label,
input[type="submit"] {
background-color: #6cb8b9;
color: #ffffff;
text-align: center;
cursor: pointer;
padding: 4px 9px;
white-space: nowrap;
transition: ease-in 0.2s;
}
fieldset input[type="radio"] {
display: none;
}
fieldset input[type="radio"]+label:hover,
fieldset input[type="radio"]:hover+label,
fieldset input[type="radio"]:active+label,
fieldset input[type="radio"]:focus+label,
fieldset input[type="radio"]:checked+label,
input[type="submit"]:hover,
input[type="submit"]:active {
background-color: #34b3fd !important;
}<form action="" method="get">
<fieldset>
<strong>Amount</strong>
<input id="1" type="radio" name="qty" value="1">
<label for="1">1</label>
<input id="2" type="radio" name="qty" value="2">
<label for="2">2</label>
<input id="3" type="radio" name="qty" value="3">
<label for="3">3</label>
<input id="4" type="radio" name="qty" value="4">
<label for="4">4</label>
</fieldset>
<fieldset>
<strong>State</strong>
<!-- changed name -->
<input id="save_now" type="radio" name="save" value="now">
<label for="save_now">Save state now</label>
<!-- changed name -->
<input id="save_later" type="radio" name="save" value="later">
<label for="save_later">Save state later</label>
</fieldset>
<input type="submit">
</form>这类似于我给出答案的问题。但这是代码。
//Set the function
function change(){
//set the varible as the button
var btn = document.getElementById('btn');
//remove the orginal class
btn.classList.remove('button');
//add the desired class
btn.classList.add('active');
}.button{
background-color: blue;
color: white;
}
.active{
background-color: orange;
color: black;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
</script>
<button class="button" id="btn" onclick="change()">Hi</button>
</body>
</html>如果你想切换，你可以使用jquery。我希望这有帮助。
我尝试了以下css，并且（除非我误解了你的问题）它有效：
input:checked + label
{
background:green;
}
我在Safari和Firefox中测试了它并且它有效。
对于“立即保存状态”和“稍后保存状态”，为什么要给它们不同的名称？如果这样做，则可以同时检查它们。给他们相同的名字，任何时候只能检查一个。我想你想要后者。
无论哪种方式，这些名称都是出于编程目的。例如，要使用javascript访问这些按钮的值。