How do I keep my form button selected after I click it?

Question

So the effect that I want is it to stay green after I click it. Currently, it turns green only when you hover, but as soon as I hover off it turns off. This ONLY happens on my pc browser. It seems to work fine on mobile safari .... am I missing something?

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

This float has a warning, but all displays fine when I run it.

.page-id-819 .hentry 
label:after,
label:hover, label:active, 
input:target, input:hover+label, 
input:active+label, input:focus+label
{
background:green !important;
}

FYI this is a radio selection turned to button.

Thanks in advance

Edit. here is the 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>

Hi Theo E, welcome to StackOverflow. So you have an actual button right now to act as a hidden radio button, right? If so, then you need to apply your styles to the button and not the input element. — Timothy Macharia, Sep 08 '18 at 01:23
@machariadev, well there can be a button in input field with type `submit`. — Code_Ninja, Sep 08 '18 at 02:08
There is no button per say. Just a styled radio form with a list, each element styled to look like a button. — Theo E, Sep 08 '18 at 04:10
Possible duplicate of [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) — Ameer, Sep 08 '18 at 14:04

score 1 · Answer 1 · 2018-09-09T16:07:17.760

There you go, I hope you find this useful

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>

this works perfect here, however the desired effect does not do the same on my site! — Theo E, Sep 10 '18 at 04:52

Ameer · Answer 2 · 2018-09-08T01:43:22.067

0

This is similar to a question I left an answer at. But here is the code.

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

If you want to toggle you could use jquery. I hope this helps.

edited Sep 08 '18 at 01:43

answered Sep 08 '18 at 01:25

Ameer

1,980
1
12
24

Hmm... this is more than just CSS. is there a CSS only way? – Theo E Sep 08 '18 at 01:34
Most likely there is one, I will try to find you one :) – Ameer Sep 08 '18 at 01:37
There was a question similar to yours where the answer stated that in all cases this requires some javascript no matter what. Here is the link to that question [question](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css/32721572#32721572) – Ameer Sep 08 '18 at 01:45
Can you show us the entire code so we can understand what is happening – Ameer Sep 09 '18 at 00:40
I'm gonna include it in the original. – Theo E Sep 09 '18 at 04:07
This works here, however not on my site. I aded this to the html and still nothing – Theo E Sep 10 '18 at 04:54
Im looking into the theme im using. I think the CSS in it is the culprit. – Theo E Sep 10 '18 at 05:17
You want to watch out for your class names as well because you could already have styling for a class called active. – Ameer Sep 11 '18 at 20:53

Mohammad Abouchama · Answer 3 · 2018-09-09T05:06:50.983

I tried the following for the css, and (unless I misunderstood your question) it worked:

        input:checked + label
        {
            background:green;
        }

I tested it in both Safari and Firefox and it worked.

For the "save state now" and "save state later", why did you give them different names? If you do so, then they can be both checked at the same time. Give them the same name, and only one can be checked at any time. I think you want the latter.

Either way, the names are for programmatic purposes. For example, to access the values of these buttons using javascript.

How do I keep my form button selected after I click it?

3 Answers3