单击后如何保持表单按钮处于选中状态？答案

【问题标题】：How do I keep my form button selected after I click it?单击后如何保持表单按钮处于选中状态？
【发布时间】：2018-09-08 01:18:00
【问题描述】：

所以我想要的效果是点击它后它保持绿色。目前，它仅在您悬停时变为绿色，但一旦我悬停它就会关闭。这只发生在我的电脑浏览器上。它似乎在移动 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>

【问题讨论】：

嗨 Theo E，欢迎来到 StackOverflow。所以你现在有一个实际的按钮来充当隐藏的单选按钮，对吧？如果是这样，那么您需要将样式应用于按钮而不是输入元素。
@machariadev，好吧，输入字段中可以有一个按钮，类型为submit。
说没有按钮。只是一个带有列表的样式单选表单，每个元素的样式看起来像一个按钮。
Can I have an onclick effect in CSS?的可能重复
那是带有onclick事件的，这是勾选的时候。

标签： html css forms button input

【解决方案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>

【讨论】：

这在这里很完美，但是在我的网站上想要的效果并不一样！

【解决方案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。我希望这会有所帮助。

【讨论】：

嗯...这不仅仅是 CSS。有唯一的 CSS 方法吗？
很可能有一个，我会尽力给你找一个:)
有一个与您的问题类似的问题，答案表明在所有情况下，无论如何这都需要一些 javascript。这是该问题的链接question
你能给我们看一下完整的代码，以便我们了解发生了什么
我会把它包含在原版中。

【解决方案3】：

我为 css 尝试了以下方法，并且（除非我误解了你的问题）它有效：

        input:checked + label
        {
            background:green;
        }

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

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

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

【讨论】：