How to make radio button like on/off switches using css - html

Question

I have requirement of radio buttons with on/off method i.e when click on one radio button it should on and when click on second button first button should off but below code is not working as per my expectation.
Here is the snippet for that html and css code:
body {
background: #0288D1;
}
.checkboxes-and-radios {
margin: 80px auto 0;
width: 280px;
padding: 30px;
background: #fafafa;
input {
display: none;
}
label {
cursor: pointer;
padding-right: 35px;
position: relative;
display: block;
font-size: 18px;
padding: 15px 0
}
input[type="checkbox"],
input[type="radio"] {
position: absolute;
visibility: hidden !important;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
margin-top: -7.5px;
box-sizing: border-box;
}
&:before {
width: 30px;
height: 15px;
right: 0px;
background: #fff;
border: 1px solid #e4e3e1;
border-radius: 15px;
}
&:after {
width: 15px;
height: 15px;
right: 15px;
background: #BDBDBD;
border-radius: 50%;
transition: all 200ms ease-out;
}
}
input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label {
&:after {
right: 0px;
background: #FF9800;
}
}
}
<div class="checkboxes-and-radios">
<h1>Radios:</h1>
<input type="radio" name="radio-cats" id="radio-1" value="1" checked>
<label for="radio-1">Radio Label 1</label>
<input type="radio" name="radio-cats" id="radio-2" value="2">
<label for="radio-2">Radio Label 2</label>
<input type="radio" name="radio-cats" id="radio-3" value="3" checked>
<label for="radio-3">Radio Label 3</label>
<h1>Checkboxes:</h1>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-1" value="1" checked>
<label for="checkbox-1">Checkbox Label 1</label>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-2" value="2">
<label for="checkbox-2">Checkbox Label 2</label>
<input type="checkbox" name="checkbox-cats[]" id="checkbox-3" value="3" checked>
<label for="checkbox-3">Checkbox Label 3</label>
</div>
expected output:
so how to add css that will look like in image shown in top?

Answer 1

Your code works like a charm for me. In your provided fiddle, the SCSS was not compiled to CSS. Here a compiled version. Radio buttons are switching correctly.
Here also a version on CodePen.
Your CSS is not CSS but SCSS, which has to be compiled to CSS.
You have to use a preprocessor to compile scss to css. You should start reading here:
http://sass-lang.com
body {
background: #0288D1;
}
.checkboxes-and-radios {
margin: 80px auto 0;
width: 280px;
padding: 30px;
background: #fafafa;
}
.checkboxes-and-radios input {
display: none;
}
.checkboxes-and-radios label {
cursor: pointer;
padding-right: 35px;
position: relative;
display: block;
font-size: 18px;
padding: 15px 0;
}
.checkboxes-and-radios input[type="checkbox"],
.checkboxes-and-radios input[type="radio"] {
position: absolute;
visibility: hidden !important;
}
.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:after {
content: '';
position: absolute;
top: 50%;
margin-top: -7.5px;
box-sizing: border-box;
}
.checkboxes-and-radios input[type="checkbox"]+label:before,
.checkboxes-and-radios input[type="radio"]+label:before {
width: 30px;
height: 15px;
right: 0px;
background: #fff;
border: 1px solid #e4e3e1;
border-radius: 15px;
}
.checkboxes-and-radios input[type="checkbox"]+label:after,
.checkboxes-and-radios input[type="radio"]+label:after {
width: 15px;
height: 15px;
right: 15px;
background: #BDBDBD;
border-radius: 50%;
transition: all 200ms ease-out;
}
.checkboxes-and-radios input[type="checkbox"]:checked+label:after,
.checkboxes-and-radios input[type="radio"]:checked+label:after {
right: 0px;
background: #FF9800;
}
<div class="checkboxes-and-radios">
<h1>Radios:</h1>
<input type="radio" name="radio-cats" id="radio-1" value="1" checked>
<label for="radio-1">Radio Label 1</label>
<input type="radio" name="radio-cats" id="radio-2" value="2">
<label for="radio-2">Radio Label 2</label>
<input type="radio" name="radio-cats" id="radio-3" value="3" checked>
<label for="radio-3">Radio Label 3</label>
<h1>Checkboxes:</h1>
<input type="checkbox" name="checkbox-cats1" id="checkbox-1" value="1" checked>
<label for="checkbox-1">Checkbox Label 1</label>
<input type="checkbox" name="checkbox-cats2" id="checkbox-2" value="2">
<label for="checkbox-2">Checkbox Label 2</label>
<input type="checkbox" name="checkbox-cats3" id="checkbox-3" value="3" checked>
<label for="checkbox-3">Checkbox Label 3</label>
</div>