Question

因此，我想要的效果是单击后保持绿色。目前，只有当您将鼠标悬停时，它才会变为绿色，但是当我将鼠标悬停时，它就会关闭。这仅发生在我的PC浏览器上。似乎可以在移动Safari上正常工作 ....我想念什么吗？

.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>

Answer 1

走了，我希望你觉得这有用

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>

Answer 2

这类似于我留下答案的问题。但是这是代码。

//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。我希望这会有所帮助。

Answer 3

我为CSS尝试了以下操作，并且（除非我误解了您的问题）它有效：

        input:checked + label
        {
            background:green;
        }

我在Safari和Firefox中都对其进行了测试，并且可以正常工作。

对于“立即保存状态”和“以后保存状态”，为什么给它们起不同的名字？如果这样做，则可以同时检查它们。给他们起同样的名字，任何时候都只能检查一个。我想你想要后者。

无论哪种方式，名称都是出于编程目的。例如，使用javascript访问这些按钮的值。

单击表单按钮后如何使其保持选中状态？

3 个答案: