Develop Reference

Customizing only selected radio button, if button selection changes, previously selected button returns to original

I used radio buttons to allow for only 1 button being selected
That worked
I customised the original look
I managed to customise the selected button
But when I change the selection, the first button still keeps the selected colors along with the new selection
I can't seem to only allow one to be the selected colors
<fieldset class="numbers-container">
<div class="number">
<input type="radio" id="no1" name="numbers" value="1" />
<label for="no1">1</label>
</div>
<div class="number">
<input type="radio" id="no2" name="numbers" value="2" />
<label for="no2">2</label>
</div>
<div class="number">
<input type="radio" id="no3" name="numbers" value="3" />
<label for="no3">3</label>
</div>
<div class="number">
<input type="radio" id="no4" name="numbers" value="4" />
<label for="no4">4</label>
</div>
<div class="number">
<input type="radio" id="no5" name="numbers" value="5" />
<label for="no5">5</label>
</div>
</fieldset>
.numbers-container {
display: flex;
gap: 1rem;
justify-content: center;
border: none;
}
input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.number {
border-radius: 50%;
height: 3rem;
width: 3rem;
display: flex;
align-items: center;
justify-content: center;
color: hsl(217, 12%, 63%);
background-color: hsl(213, 25%, 25%);
border: none;
}
.number:hover {
background-color: hsl(25, 97%, 53%);
color: white;
}
.selected {
background-color: hsl(217, 12%, 63%);
color: white;
}
const ratingState = document.querySelector(".rating-state");
const thanksState = document.querySelector(".thanks-state");
const btnSubmit = document.querySelector(".btn-submit");
const numberSelect = document.querySelectorAll(".number");
for (let i = 0; i < numberSelect.length; i++)
numberSelect[i].addEventListener("click", function () {
console.log("button clicked", numberSelect[i]);
numberSelect[i].classList.add("selected");
});

You don't remove your .selected class for every radio button in the fieldset:
const ratingState = document.querySelector(".rating-state");
const thanksState = document.querySelector(".thanks-state");
const btnSubmit = document.querySelector(".btn-submit");
const numberSelect = document.querySelectorAll(".number");
for (let i = 0; i < numberSelect.length; i++)
numberSelect[i].addEventListener("click", function() {
console.log("button clicked", numberSelect[i]);
if (numberSelect[i].classList.contains("selected")) numberSelect[i].classList.remove("selected");
else {
numberSelect.forEach((select) => select.classList.remove("selected"));
numberSelect[i].classList.add("selected");
}
});
.numbers-container {
display: flex;
gap: 1rem;
justify-content: center;
border: none;
}
input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.number {
border-radius: 50%;
height: 3rem;
width: 3rem;
display: flex;
align-items: center;
justify-content: center;
color: hsl(217, 12%, 63%);
background-color: hsl(213, 25%, 25%);
border: none;
}
.number:hover {
background-color: hsl(25, 97%, 53%);
color: white;
}
.selected {
background-color: hsl(217, 12%, 63%);
color: white;
}
<fieldset class="numbers-container">
<div class="number">
<input type="radio" id="no1" name="numbers" value="1" />
<label for="no1">1</label>
</div>
<div class="number">
<input type="radio" id="no2" name="numbers" value="2" />
<label for="no2">2</label>
</div>
<div class="number">
<input type="radio" id="no3" name="numbers" value="3" />
<label for="no3">3</label>
</div>
<div class="number">
<input type="radio" id="no4" name="numbers" value="4" />
<label for="no4">4</label>
</div>
<div class="number">
<input type="radio" id="no5" name="numbers" value="5" />
<label for="no5">5</label>
</div>
</fieldset>
On a side note, what you are trying to achieve is totally possible using just CSS:
.numbers-container {
display: flex;
gap: 1rem;
justify-content: center;
border: none;
}
input[type="radio"] {
/* 👇 hide checkbox so that we only have to worry about label */
display: none;
}
/* 👇 select sibling label */
input[type="radio"]:checked+label {
background-color: hsl(217, 12%, 63%);
color: white;
}
label:hover {
background-color: hsl(25, 97%, 53%);
color: white;
}
label {
/* 👇 label size of div */
width: 3rem;
height: 3rem;
border-radius: 50%;
/* 👇 center label text */
text-align: center;
vertical-align: middle;
line-height: 3rem;
/* 👇 your other styling */
background-color: hsl(213, 25%, 25%);
color: hsl(217, 12%, 63%);
}
<fieldset class="numbers-container">
<input type="radio" id="no1" name="numbers" value="1" />
<label for="no1">1</label>
<input type="radio" id="no2" name="numbers" value="2" />
<label for="no2">2</label>
<input type="radio" id="no3" name="numbers" value="3" />
<label for="no3">3</label>
<input type="radio" id="no4" name="numbers" value="4" />
<label for="no4">4</label>
<input type="radio" id="no5" name="numbers" value="5" />
<label for="no5">5</label>
</fieldset>

Make div onclick event work instead of buttons and checkboxes inside it?

I have a div with a checkbox inside it, and the checkbox does not work by itself (it is triggered by the div onclick), I want to make it so that clicking anywhere on the div (including the checkbox, or a button too, the onclick event of the div gets called instead of the button/checkbox). Kinda like a z-index but for javascript?

Use a label
.product {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
}
.product label {
display: block;
width: 100%;
height: 100%;
border: 1px solid black;
cursor: pointer;
}
<div class="product">
<label><span>Product 1</span>
<input type="checkbox" id="p1" />
</label>
</div>
<div class="product">
<label><span>Product 2</span>
<input type="checkbox" id="p2" />
</label>
</div>
<div class="product">
<label><span>Product 3</span>
<input type="checkbox" id="p3" />
</label>
</div>
another variation
.product {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
}
.product input {
display: none;
}
.product label {
display: block;
width: 100%;
height: 100%;
border: 1px solid black;
cursor: pointer;
}
.product input:checked + label {
background-color: #CCC;
}
<div class="product">
<input type="checkbox" id="p1" />
<label for="p1">Product 1</label>
</div>
<div class="product">
<input type="checkbox" id="p2" />
<label for="p2">Product 2</label>
</div>
<div class="product">
<input type="checkbox" id="p3" />
<label for="p3">Product 3</label>
</div>

What you probably want to do is avoid the event triggered by the checkbox, try disabling it by css pointer-events: none;

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>

Close/Hide Modal

Im having a hard time how to close or hide my modal after filling it up.
Upon clicking submit i want it to go back to the page where the textbox is clickable. Once go back to the page, the checkbox i check should still checked when i open it again. Can anyone do it with javascript thing or any other solution.
I don't have time now to use bootstrap and my codes are below. i just want to hide my modal or close upon clicking submit. Help me please, thanks.
My working fiddle: https://jsfiddle.net/fe73awsu/
Please see my code below:
test.php
<form method="post" name="testform" action="#">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div> <!-- close modalcol1 -->
</div> <!-- close modalcontainer -->
<div class="overlay"></div>
</div> <!-- close modalwrapper -->
</form>
modal.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
Help me guys, please :( i need it badly now.

Calm down bro,
Check this jsfiddle link.
Add this js code,
$(document).on("click",".btn1", function(){
$('#modal').hide();
});
Why so serious ?

<button type="button" id="close"class="btn green btn-default" data-dismiss="modal">Close <i class="fa fa-times" aria-hidden="true"></i></button>
Add JavaScript
function onSave(){
$('#close').Click();
}

try this.
<button class="btn1" type="button" value="Submit" on-click= submit();>Submit</button>
// Script
function submit() {
window.history.back();
}

$(document).on("click",".btn1", function(){
$('#modal').hide();
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div> <!-- close modalcol1 -->
</div> <!-- close modalcontainer -->
<div class="overlay"></div>
</div> <!-- close modalwrapper -->
</form>

Put this in file.
$('#modal_edit').modal('hide');
is hope help kubb.

CSS checkbox styling not working

I have my checkboxes and I am trying to style it with the following CSS.
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
The checkboxes are inside my form.
This does not work when I click my checkbox. I am new to styling and let me know where the error is.

You have spaces around the name in the for attribute, remove them.
Working demo:
input[type="checkbox"]{
display: none;
border: none !important;
box-shadow: none !important;
}
input[type="checkbox"] + label span {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
/*added this to show the behavior here on SO*/
background-color: #000
}
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for="id_contract_name">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for="id_is_ceo">
<span></span> CEO?
</label>
</div>

You have to mention id or class in CSS.
And if you want to add css dynamically then you have to use javascript or jquery.
#id_contract_name{
display: none;
border: none !important;
box-shadow: none !important;
}
#id_is_ceo {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background: url(/static/app/images/check_no.svg);
}
input[type="checkbox"]:checked + label span {
background: url(/static/app/images/check_yes.svg);
content: '';
color: #fff;
vertical-align: middle;
width: 30px;
height: 30px;
}
<html>
<body>
<div class="check1">
<input id="id_contract_name" name="contract_name" type="checkbox">
<label for=" id_contract_name ">
<span class="chk_contract"></span> Name on Contract
</label>
</div>
<div class="check2">
<input id="id_is_ceo" name="is_ceo" type="checkbox">
<label for=" id_is_ceo ">
<span></span> CEO?
</label>
</div>
</body>
</html>