How do I keep my form button selected after I click it?
How do I keep my form button selected after I click it?
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>
@machariadev, well there can be a button in input field with type
submit.– Code_Ninja
Sep 8 '18 at 2:08
submit
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 8 '18 at 4:10
Possible duplicate of Can I have an onclick effect in CSS?
– Ameer
Sep 8 '18 at 14:04
That is with an onclick event, this is when checked.
– Theo E
Sep 8 '18 at 23:01
3 Answers
3
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 4:52
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.
Hmm... this is more than just CSS. is there a CSS only way?
– Theo E
Sep 8 '18 at 1:34
Most likely there is one, I will try to find you one :)
– Ameer
Sep 8 '18 at 1: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
– Ameer
Sep 8 '18 at 1:45
Can you show us the entire code so we can understand what is happening
– Ameer
Sep 9 '18 at 0:40
I'm gonna include it in the original.
– Theo E
Sep 9 '18 at 4:07
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.
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
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.
– machariadev
Sep 8 '18 at 1:23