Develop Reference

square radios highlight on checked

I am trying to build a radio survey question with 5 square radio buttons, but I am having trouble getting it to change color while the radio is checked or focused
I am also using Vue so it is recommended to put the input inside the label
https://codepen.io/phongoli0/pen/qBbXmoe?editors=1100
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<label>
0
<input type="radio" value="0" /></label>
<label>
1
<input type="radio" value="1" /></label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>

This is because you have the <input type="radio"> inside your <label>, not next to it and the :focus property has to be on the <label> not on the <input type="radio"> radio which is hidden.
The dashed green border on :focus disappears after clicking on the label because the input will hold the :focus after clicking on it.
Here a working live Codepen (case: input and label are siblings)
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<input id="radio0" type="radio" value="0" name="squareradios" />
<label tabindex="1" for="radio0">
0
</label>
<input id="radio1" type="radio" value="1" name="squareradios" />
<label tabindex="1" for="radio1">
1
</label>
<input id="radio2" type="radio" value="2" name="squareradios" />
<label tabindex="1" for="radio2">
2
</label>
<input id="radio3" type="radio" value="3" name="squareradios" />
<label tabindex="1" for="radio3">
3
</label>
<input id="radio4" type="radio" value="4" name="squareradios" />
<label tabindex="1" for="radio4">
4
</label>
<input id="radio5" type="radio" value="5" name="squareradios" />
<label tabindex="1" for="radio5">
5
</label>
</div>
EDIT
New Request:
I am also using Vue so it is recommended to put the input inside the label.
I would use JavaScript to handle this situation: toggle a class (I used a class called "checked") on the label to add the style.
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
labels[i].addEventListener(
"click",
function (e) {
e.preventDefault();
e.stopPropagation();
if (this.classList.contains("checked")) {
this.classList.remove("checked");
this.firstElementChild.checked = false;
} else {
var checked = document.querySelector("label.checked");
if (checked) {
checked.classList.remove("checked");
checked.firstElementChild.checked = false;
}
this.classList.add("checked");
this.firstElementChild.checked = true;
}
},
false
);
}
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios label.checked {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<label tabindex="1">
0
<input name="squareradios" type="radio" value="0" />
</label>
<label tabindex="1">
1
<input name="squareradios" type="radio" value="1" />
</label>
<label tabindex="1">
2
<input name="squareradios" type="radio" value="2" />
</label>
<label tabindex="1">
3
<input name="squareradios" type="radio" value="3" />
</label>
<label tabindex="1">
4
<input name="squareradios" type="radio" value="4" />
</label>
<label tabindex="1">
5
<input name="squareradios" type="radio" value="5" />
</label>
</div>
Here a working live Codepen (case: input is inside label)

I know there are several answers already but this is exactly what you're looking for:
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
.squareRadios input[type="radio"]:checked + label {
background: red;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" name="my_radios"/>
<label>0</label>
<input type="radio" value="1" name="my_radios"/>
<label>1</label>
<input type="radio" value="2" name="my_radios"/>
<label>2</label>
<input type="radio" value="3" name="my_radios"/>
<label>3</label>
<input type="radio" value="4" name="my_radios">
<label>4</label>
<input type="radio" value="5" name="my_radios"/>
<label>5</label>
</div>
Now here's what I've changed to make things work:
Like everybody else says, you'll need to put the input and label next to each other.
I changed the styling of the radio buttons. I made them absolute instead of fixed and gave them a 100% width and height so they are clickable and fill out the whole label.
I gave each radio button a name so they would be grouped to gether and actually work like radio buttons (only 1 button can be selected, not multiple)

First thing is that you are hiding the main circle of radio button, by setting opacity and width to 0, with this the radio button is not be able to checked.
Second thing *+ symbol: It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
position: fixed;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="5" />
<label>5</label>
</div>
So, remove the opacity and width properties with that your radio button can be checked and set label adjacent to input field.
*Source: CSS selector for a checked radio button's label

Labels should be next to its thing, not wrap around it.
Second thing is that you made your radios like this:
opacity: 0;
position: fixed;
width: 0;
If you set your opacity: 1; you see you where not really clicking on anything.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 1;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" />
<label>0</label>
<input type="radio" value="1" checked />
<label> 1</label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>

How to change the color of div while a radio input is selected using JavaScript

The current problem I am having is that when an input is selected, all the div elements are permanently changed to red. I only want the selected input's div to become red. Also, if another input is selected I want the previous input to return to its original color.
This is what I have so far,
CodePen: https://codepen.io/martinlutherwinn/pen/jOEVmGj
function chgCol() {
var input =[];
var input = document.getElementsByClassName("Amt_Int");
var div =[];
var div = document.getElementsByClassName("Amt_Lal");
for(i=0; i < input.length; i++){
for(i=0; i < div.length; i++){
if(input[i].checked = true){
div[i].style.color = "red";
div[i].style.borderColor= "red";
} else{
div[i].style.color = "blue";
div[i].style.borderColor= "blue";
}
}
}
}
.DoF_Amt, .Pel_Info,.Pat_Info{
background-color: white;
margin-left: 20%;
margin-right: 20%;
color:blue;
margin-bottom: 5%;
padding: 5%
}
.Amt_Cor{
display:flex;
flex-wrap: wrap;
align-items:center;
justify-content: center;
}
.Amt_Lal{
display:flex;
justify-content:center;
align-items: center;
border: .3vmin solid rgba(0,0,255,1);
border-radius: 50%;
vertical-align: middle;
padding: 2%;
height: 10vmin;
width: 10vmin;
font-size: 4vmin;
margin: 2%;
}
.Amt_Int{
position: absolute;
clip: rect(0,0,0,0);
border: 0;
}
<form class="DoF_Amt">
<h2>Donation Amount</h2>
<div class="Amt_Cor">
<div class="Amt_Lal">
<label>
<input class="Amt_Int" type="radio" name="amount" value="one" />$1
</label>
</div>
<div class="Amt_Lal" onclick="chgCol()">
<label>
<input
class="Amt_Int"
type="radio"
name="amount"
value="twentyfive"
/>$25
</label>
</div>
<div class="Amt_Lal" onclick="chgCol()">
<label>
<input class="Amt_Int" type="radio" name="amount" value="fifty" />$50
</label>
</div>
<div class="Amt_Lal" onclick="chgCol()">
<label>
<input
class="Amt_Int"
type="radio"
name="amount"
value="seventhyfive"
/>$75
</label>
</div>
<div class="Amt_Lal" onclick="chgCol()">
<label>
<input
class="Amt_Int"
type="radio"
name="amount"
value="Custom"
/>Custom
</label>
</div>
</div>
<script src="/JavaScript/selectedInput.js"></script>
<button type="button">Donate with PayPal</button>
<button type="button">Donate with a Card</button>
</form>

Pass the event-target along to your click-handler by changing onclick="chgCol()" to onclick="chgCol({ target })". Then you can react more dynamically.
An even better solution would be to delegate the event to the parent-element (<div class="Amt_Cor">). An example follows:
const [clickTarget] = document.getElementsByClassName('Amt_Cor');
clickTarget.onclick = ({ target }) => {
if (!target.classList.contains('Amt_Lal')) return;
const currentlyHighlighted = document.querySelector('.highlight');
if (currentlyHighlighted) currentlyHighlighted.classList.remove('highlight');
target.classList.add('highlight');
target.firstElementChild.checked = true;
console.log(document.querySelector('[name="amount"]:checked').value);
};
.DoF_Amt, .Pel_Info,.Pat_Info{
background-color: white;
margin-left: 20%;
margin-right: 20%;
color:blue;
margin-bottom: 5%;
padding: 5%
}
.Amt_Cor{
display:flex;
flex-wrap: wrap;
align-items:center;
justify-content: center;
}
.Amt_Lal{
display:flex;
justify-content:center;
align-items: center;
border: .3vmin solid rgba(0,0,255,1);
border-radius: 50%;
vertical-align: middle;
padding: 2%;
height: 10vmin;
width: 10vmin;
font-size: 4vmin;
margin: 2%;
}
.Amt_Lal::after {
content: "";
position: absolute;
width: 15vmin;
height: 15vmin;
border-radius: 50%;
}
.Amt_Int {
position: absolute;
clip: rect(0,0,0,0);
border: 0;
}
.highlight {
border-color: red;
color: red;
}
<div class="Amt_Cor">
<label class="Amt_Lal">
<input class="Amt_Int" type="radio" name="amount" value="one">$1
</label>
<label class="Amt_Lal">
<input class="Amt_Int" type="radio" name="amount" value="twentyfive">$25
</label>
<label class="Amt_Lal">
<input class="Amt_Int" type="radio" name="amount" value="fifty">$50
</label>
<label class="Amt_Lal">
<input class="Amt_Int" type="radio" name="amount" value="seventhyfive">$75
</label>
<label class="Amt_Lal">
<input class="Amt_Int" type="radio" name="amount" value="Custom">Custom
</label>
</div>

You could do this with Pure CSS if you restructured your DOM a little and used the labels as the bubbles instead of their parent divs. You can take advantage of the :checked selector alongside the + (adjacent sibling) selectors.
Here's my take:
/* The important stuff: */
label {
border: .1rem solid rgba(0, 0, 255, 1);
color: rgba(0, 0, 255, 1);
}
input:checked+label {
border: .1rem solid rgba(255, 0, 0, 1);
color: rgba(255, 0, 0, 1);
}
/* The rest: */
form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
label {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
vertical-align: middle;
height: 3rem;
width: 3rem;
font-size: 1rem;
padding: 0.5rem;
margin: 0.5rem;
}
input {
position: absolute;
clip: rect(0, 0, 0, 0);
border: 0;
}
<form>
<div>
<input id="option1" type="radio" name="amount" value="1">
<label for="option1">$1</label>
</div>
<div>
<input id="option2" type="radio" name="amount" value="5">
<label for="option2">$5</label>
</div>
<div>
<input id="option3" type="radio" name="amount" value="25">
<label for="option3">$25</label>
</div>
<div>
<input id="option4" type="radio" name="amount" value="50">
<label for="option4">$50</label>
</div>
</form>

When checked multiple checkboxes form fields should appear accordingly with common fields

When the user checks multiple checkboxes, form fields should appear according to the checkboxes, example: if flight checkbox had full name last name, when user checked both hotel and flight the full name and last name should be there and other fields should be hidden.
I have tried a toggle method which hides when I check, but I can not select multiple fields and get the common fields together and hide others. also my checkboxes should be aligned horizontally. I should css but it's not working
function toggle(object) {
var input;
var value = object.getAttribute("value");
switch (value) {
case "flight":
input = "input1";
break;
case "hotel":
input = "input2";
break;
case "travel":
input = "input3";
break;
}
var elements = document.getElementsByClassName(input);
for (var i = 0; i < elements.length; i++) {
if (elements[i].style.display == "block") {
elements[i].style.display = "none";
} else {
elements[i].style.display = "block";
}
}
document.getElementsByTagName("button")[0].style.display = "block";
}
.form-style-1 {
max-width: 600px;
padding: 15px 25px;
background: #f4f7f8;
margin: 15px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 18px;
font-family: Calibri, sans-serif;
}
.form-style-1 fieldset {
border-radius: none;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid lightgray;
width: 550px;
margin: auto;
}
.form-style-1 lable {
width: 180px;
float: left;
padding-top: 50px;
}
.form-control {
width: 550px;
padding: 15px 30px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
display: inline;
}
output {
height: 30px;
display: block;
padding-top: 20px;
}
.btn {
width: 100%;
background-color: #4CAF50;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
.form-style-1 input[type="text"],
.form-style-1 input[type="date"],
.form-style-1 input[type="datetime"],
.form-style-1 input[type="email"],
.form-style-1 input[type="number"],
.form-style-1 input[type="search"],
.form-style-1 input[type="time"],
.form-style-1 input[type="url"],
.form-style-1 input[type="tel"],
.form-style-1 textarea,
.form-style-1 select {
font-family: Calibri, sans-serif;
background: rgba(255, 0, 0, 0.2);
border: none;
border-radius: 3px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #000000;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 10px;
}
.form-style-1 input[type="text"]:focus,
.form-style-1 input[type="date"]:focus,
.form-style-1 input[type="datetime"]:focus,
.form-style-1 input[type="email"]:focus,
.form-style-1 input[type="number"]:focus,
.form-style-1 input[type="search"]:focus,
.form-style-1 input[type="time"]:focus,
.form-style-1 input[type="url"]:focus,
.form-style-1 input[type="tel"],
.form-style-1 textarea:focus,
.form-style-1 input {}
}
.form-style-1 select {
-webkit-appearance: menulist-button;
height: 15px;
color: #000000;
text-shadow: 0 1px 0 rgba(0, 0, 0);
background: #d2d9dd;
}
.form-style-1 number {
background: #1abc9c;
color: #000000;
height: 10px;
width: 10px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 10px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-1 input[type="submit"],
.form-style-1 input[type="button"] {
position: relative;
display: block;
padding: 15px 29px 15px 29px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 15px;
text-align: center;
line-height: 10%;
font-style: normal;
width: 30%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-top: 1px;
margin-bottom: 5px;
}
.form-style-1 input[type="submit"]:hover,
.form-style-1 input[type="button"]:hover {
background: #109177;
}
#travel-form label,
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 80%;
padding-bottom: 0.1rem;
}
#travel-form input,
select {
margin-left: 1rem;
}
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 250%;
padding-bottom: 0.1rem;
}
.common {
margin-bottom: 8px;
}
input[type="text"] {
display: none;
}
button {
display: none;
}
input[type="checkbox"] {
display: inline;
width: 12px;
height: 12px;
padding: 5px;
}
<body>
<div class="form-style-1">
<form action="mailto: ?subject=Travel Pre-approval Form " method="post" enctype="text/plain" id="travel-form" onsubmit="test1()">
<fieldset>
<input type="checkbox" onclick="toggle(this)" id="flight" value="flight"><label for="flight">Flight</label>
<input type="checkbox" onclick="toggle(this)" id="hotel" value="hotel"><label for="hotel">Hotel</label>
<input type="checkbox" onclick="toggle(this)" id="travel" value="travel"><label for="travel">Travel</label>
<label>Full Name: <input type="text" class="input1 common " id="name" placeholder="Full Name as per Passport"></label><br>
<label>Date of travel: <input type="date" class="input1 common " name="num1" id="date of travel"></label>
<label>Date of arrival: <input type="date" class="input1 common" name="num2"></label>
<label>Origin Location: <select name="opt2" id="cost" onchange="calculateTotal()">
<option value="select">select</option>
<option value="Dubai, United Arab Emirates (DXB-Dubai Intl.)">Dubai, United Arab Emirates (DXB-Dubai Intl.)</option>
</select></label>
<label>Destination Location: <select name="op1" id="locations" onchange="calculateTotal()">
<option value="none">none</option>
<option value="Aberdeen, Scotland, UK (ABZ)">Aberdeen, Scotland, UK (ABZ)</option>
</select></label>
<label>Mobile Number(Roaming) <input type="tel" id="phone"></label><br>
<br>
<label>Company Email Address <input type="email" id="email" placeholder="email address"></label><br>
<br>
<label>Passport Number <input type="text" id="passnum" size="5" name="passportnumber"></label>
<br>
<br>
<label>Passport Expiry Date <input type="date" id="passexdate" size="4" name="passportexdate"></label> <br>
<br>
<label>Visa Required <select type="checkbox" name="visarequired">
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Don't Know">Don't Know</option>
</select></label>
<br>
<br>
<label>Visa Expiry Date <input type="date" id="visaexdate" name="visa"> </label>
<br>
<br>
<label>Purpose of Travel <input type="text" rows="6" cols="50" name="purpose Of Travel" form="usrform" placeholder="Purpose Of Travel">
</label> <br>
<label>Address Of Place Of Visitrows <input type="text" rows="6" cols="50" name="address" form="usrform" placeholder="Address of the place of Vist">
</label> <br>
<br>
<label>Billable Cost Centre <input type="text" id="billablecostcentre"></label>
<br>
<br>
<label>Billable project code <br> (Select "N/A" otherwise) <input type="text"></label>
<br>
<br>
<textarea rows="4" cols="150" name="comment" form="usrform" placeholder="Comments">
</textarea>
<label>Do you need Ground Transfer <select type="checkbox" namegroundtransfer>
<option>Yes</option>
<option>No</option>
</select></label>
<br>
<div id="totalCost">Total Cost </div><br>
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</div>

Check out the following code, it's a bit shortened and generalized CSS only approach of your form, that allows you to toggle form fields conditionally with checkboxes:
.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}
<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">
<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>
<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text" placeholder="Full Name as per Passport" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>
also my checkboxes should be aligned horizontally
this should be satisfied as well by the above snippet
We basically use checkboxes to toggle form fields based on the data-conditional attribute (you can call it whatever you like) that contains some value(s) we control to show/hide the form fields. The relatively simple secret-sauce part here is the general next sibling selector combined with HTML markup that allows us to use it properly.
I added some more fields that only show up for a single checkbox at the end of the form, to illustrate how the conditional filter works.

CSS - li background color on checked radio

I am stuck with this code. I want to change the background color of the li when the respective radio button is selected. Please see attached fiddle for a demo.
Is it possible to do without editing the original html as this is produced by a core file that I don't really want to edit?
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Thanks in advance.

Since #kevin-lewis already mentioned, that there are no parent selectors in css, in order to have a pure css solution, we need to cheat a bit with styling the <label> tag, so that it fills the whole parent <li> element (using absolute positioning) and has the same margins and borders. The only fiddly bit that may not work reliably is the left padding of the styled <label> - it has to take into account the width of the radio button - hence the "magic" 2.6em.
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
position: relative;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input:checked + label{
display: inline-block;
background-color: DodgerBlue;
height: 100%;
width: 100%;
z-index: -1;
padding: .5em 1em;
padding-left: 2.6em;
border: 1px transparent;
border-radius: 4px;
box-sizing: border-box;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

I suppose you need to change the color of the parent li. In this case this is how I am doing it.
let imps = Array.from(
document.querySelectorAll(".wc-deposits-option [type='radio']")
);
imps.map((r) => {
r.addEventListener("change", () => action(r));
window.onload = (() => action(r));
});
function action(r){
// this function is called when the window loads & when a radio button is clicked
imps.map( R => {R.parentElement.style.background = "white";})
if (r.checked) {
r.parentElement.style.background = "gold";
}
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
I hope this is what you need.
UPDATE
Yet an other JavaScript solution is to check the radio when you click the <li>parent. I think this is more UI friendly.
let lis = Array.from(
document.querySelectorAll(".wc-deposits-option li")
);
lis.map((li) => {
li.addEventListener("click", () => action(li));
window.onload = (() => action(li));
});
function action(li){
lis.map((_li) => {_li.style.background = "white"});
let thisRadio = li.querySelector("[type='radio']");
thisRadio.checked = true;
li.style.background = "gold"
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

Use onclicks for each radio element
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" onclick = "toggleBackground(true)" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" onclick = "toggleBackground(false)" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Then use the following js code:
function toggleBackground(type) {
if(type) {
document.getElementById('wc-option-pay-deposit').style.background = 'color-1';
document.getElementById('wc-option-pay-full').style.background = 'color-2';
} else {
document.getElementById('wc-option-pay-deposit').style.background = 'color-2';
document.getElementById('wc-option-pay-full').style.background = 'color-1';
}
}

Add :checked for radio in css and background-color: #ff0000;
Test
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input[type=radio]:checked + label {
background-color: #ff0000;
font-style: normal;
}
input[type=radio] + label {
color: #ccc;
font-style: italic;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>

Please review solution link below. I used javascript to fixed this problem.
I hope this answer will be helpful for you
https://codepen.io/dev_aman/pen/YOxjpR

Using vanilla JavaScript :
function toggleItem ( input )
{
input.closest( 'li' ).classList.toggle( 'wc-deposits-option-checked' );
}
function toggleOptions ()
{
let
list = document.querySelector( '.wc-deposits-option' ),
checked = list.querySelector( 'input:checked' );
toggleItem( checked );
list.addEventListener( 'input', () => {
let target = event.target;
toggleItem( target );
toggleItem( checked );
checked = target;
});
}
toggleOptions();
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
.wc-deposits-option-checked
{
background-color: #00F;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>

Custom css radiobuttons hover effect

i'm trying to create something like this
but i'm not that good with javascript and so..
So i got this now, but i can't get the hover effect to work..
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<link rel="stylesheet" href="styles.css">
</head>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>
<body>
</body>
</html>
And CSS
input[type=radio] {
display:none;
margin:10px;
}
input[type=radio] + label {
display:inline-block;
margin: 2px;
padding: 18px 112px;
background-color: white;
border: 1px solid #d6d6d6;
border-radius: 4px;
}
input[type=radio]:checked + label {
background-image: none;
border: 2px solid #08c;
}
Well this works but how do i make a hover effect? Any help would be usefull! Also if you think i should do this completely different please tell me

Just do it with plain CSS.
input[type=radio] {
display: none;
margin: 10px;
}
input[type=radio] + label {
display: inline-block;
margin: 2px;
padding: 18px 112px;
background-color: white;
border: 1px solid #d6d6d6;
border-radius: 4px;
}
input[type=radio] + label:hover {
border: 1px solid black;
background-color: gray;
}
input[type=radio]:checked + label {
background-image: none;
border: 2px solid #08c;
}
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>
You could even go more fancy and add some transitions (most browsers support them nowdays http://caniuse.com/#feat=css-transitions)
input[type=radio] {
display: none;
margin: 10px;
}
input[type=radio] + label {
transition: all 0.5s ease;
display: inline-block;
margin: 2px;
padding: 18px 112px;
background-color: white;
border: 1px solid #d6d6d6;
border-radius: 4px;
}
input[type=radio] + label:hover {
border: 1px solid black;
background-color: LightGray;
}
input[type=radio]:checked + label {
background-image: none;
border: 2px solid #08c;
}
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>