Как сохранить кнопку формы выбранной после нажатия на нее?

Question

Так что эффект, который я хочу, это чтобы он оставался зеленым после того, как я нажму на него. В настоящее время он становится зеленым только при наведении курсора, но как только я выключаю его, он выключается. Это происходит ТОЛЬКО в браузере моего компьютера. Похоже, работает нормально на мобильном сафари .... я что-то упустил?

.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

Я попробовал следующее для css, и (если я не понял вашего вопроса) это сработало:

        input:checked + label
        {
            background:green;
        }

Я тестировал его в Safari и Firefox, и он работал.

Для слов "сохранить состояние сейчас" и "сохранить состояние позже", почему вы дали им разные имена? Если вы это сделаете, то они могут быть проверены одновременно. Дайте им одно и то же имя, и только один может быть проверен в любое время. Я думаю, что вы хотите последнее.

В любом случае, имена предназначены для программных целей. Например, для доступа к значениям этих кнопок используется javascript.

Answer 2

Ну вот, надеюсь, вы найдете это полезным

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 3

Это похоже на вопрос, на который я оставил ответ. Но вот код.

//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. Надеюсь, это поможет.