revision:
<div class="row">
<input class="custom-control-input inp1"type="checkbox" id="inlineCheckbox1" Checked value="option1">
<label class="custom-control-label" for="inlineCheckbox1">Option1</label><br>
<input class="custom-control-input inp1" type="checkbox" id="inlineCheckbox1" value="option2">
<label class="custom-control-label" for="inlineCheckbox1">Option2</label><br>
<input class="custom-control-input inp1" Checked type="checkbox" id="inlineCheckbox1" value="option3">
<label class="custom-control-label" for="inlineCheckbox1">Option3</label><br><br>
<p id="check1"></p>
</div>
<style>
.row{display: inline-block; margin-left: 1vw;}
.inp1{width: 60vw; height: 2vw; }
#check1{display: flex; flex-flow: column wrap; color: red; margin-left: 30vw;}
</style>
<script>
const data = [...document.querySelectorAll('.inp1:checked')].map(e => e.value);
console.log(data);
document.getElementById("check1").innerHTML = data;
</script>
<div class="spec">
<div class="check4">
<input type="checkbox" class="check5" name="type" value="1" />1
<input type="checkbox" class="check5" name="type" value="2" />2
<input type="checkbox" class="check5" name="type" value="3" />3
<input type="checkbox" class="check5" name="type" value="4" />4
<input type="checkbox" class="check5" name="type" value="5" />5
</div>
<div><button id="showResult">show checked values:</button><span id="check6"></span></div>
</div>
<style>
.check4{display:flex; flex-flow: row wrap;justify-items: space-between; margin: 0 20vw;}
.check5{width: 4vw; height: 2vw;}
#showResult{height:3vw; width:10vw; margin: 0 20vw;}
#check6{margin-left: -15vw; color: red; font-size:2vw; font-weight: 700;}
</style>
<script>
function getCheckedValues() {
return Array.from(document.querySelectorAll('input[class="check5"]'))
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value)
}
const resultEl = document.getElementById('check6');
document.getElementById('showResult').addEventListener('click', () => {
resultEl.innerHTML = getCheckedValues();
});
</script>
<div class="spec">
<div id="check7">
<input type="checkbox" class="choose" name="type" value="4" />
<input type="checkbox" class="choose" name="type" value="3" />
<input type="checkbox" class="choose" name="type" value="1" />
<input type="checkbox" class="choose" name="type" value="5" />
<input type="checkbox" class="choose" name="type" value="7" />
<input type="checkbox" class="choose" name="type" value="6" />
<input type="checkbox" class="choose" name="type" value="2" />
</div><br>
<p id="check8"></p>
</div>
<style>
#check7{display:flex; flex-flow: row wrap;justify-items: stretch; width: 30vw; height: 2vw; margin: 0 auto;}
.choose{width: 3vw; height: 1vw;}
#check8{color: blue; margin-left: 30vw;}
</style>
<script>
$('#check7').change(function() {
var values = [];
{
$('#check7 :checked').each(function() {
//if(values.indexOf($(this).val()) === -1){
values.push($(this).val());
// }
});
console.log(values);
document.getElementById("check8").innerHTML += values + '<br>';
}
});
</script>
<div class="check9">
<input type="checkbox" name="laptop" value="HP">HP laptop<br>
<input type="checkbox" name="laptop" value="DELL">DELL laptop<br>
<input type="checkbox" name="laptop" value="MAC">MAC laptop<br>
<input type="checkbox" name="laptop" value="ASUS">ASUS laptop<br>
<button id="btn2" onclick="getValue()"> get value </button>
</div>
<script>
function getValue() {
var checkboxes = document.getElementsByName('laptop');
var result = "";
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
result += checkboxes[i].value + " " + " Laptop, ";
}
}
document.write("<p> You have selected : " + result + "</p>");
}
</script>
<style>
.check9{width:30vw; display: flex; flex-direction: column; margin-left: 30vw;}
#btn2{width: 10vw; height: 2vw;margin-left: 5vw;}
</style>
<div class="'check10">
<table id="tblFruits">
<tr><td><label for="chkMango">Mango</label><input id="chkMango" type="checkbox" value="mango"/></td></tr>
<tr><td><label for="chkApple">Apple</label><input id="chkApple" type="checkbox" value="apple"/></td></tr>
<tr><td><label for="chkBanana">Banana</label><input id="chkBanana" type="checkbox" value="banana"/></td></tr>
<tr><td><label for="chkGuava">Guava</label><input id="chkGuava" type="checkbox" value="guava"/></td></tr>
<tr><td><label for="chkOrange">Orange</label><input id="chkOrange" type="checkbox" value="orange"/></td></tr>
</table><br>
<input type = "button" id="btnP" value = "Get" onclick = "getSelected()" /><br>
<p class="spec" id="check11"></p>
</div>
<style>
#tblFruits{display:flex; flex-flow:row wrap;margin-left: 25vw;}
#btnP, #check11{margin-left: 30vw;}
</style>
<script>
function getSelected() {
// Create an Array.
var selected = new Array();
//Reference the Table.
var tblFruits = document.getElementById("tblFruits");
//Reference all the CheckBoxes in Table.
var chks = tblFruits.getElementsByTagName("input");
// Loop and push the checked CheckBox value in Array.
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
}
}
//Display the selected CheckBox values.
if (selected.length > 0) {
document.getElementById("check11").innerHTML += 'selected values: ' + selected.join(', ');
}
};
</script>
<div class="spec">
<input type="checkbox" id="accept" name="accept" value="yes" />
<label for="accept"></label>accept</label>
<p class=spec id="js-1"></p>
</div>
<script>
const check = document.querySelector('#accept');
console.log(check.checked);
document.getElementById("js-1").innerHTML = check.checked;
</script>
<div class="spec">
<label for="accepted">
<input type="checkbox" id="accepted" name="accepted" value="accepted"/>Accept
</label>
<button id="btn3">submit</button>
<p class="spec" id="js-2"></p>
</div>
<script>
const cb = document.querySelector('#accepted');
const btn3 = document.querySelector("#btn3");
btn3.onclick =() => {
document.getElementById("js-2").innerHTML = cb.value;
}
</script>
Select your favorite colors:
<div class="spec style1">
<p class="spec">Select your favorite colors: </p>
<label for="c1"> <input type="checkbox" name="color" value="red" id="c1">red</label>
<label for="c2"><input type="checkbox" name="color" value="green" id="c2">green</label>
<label for="c3"><input type="checkbox" name="color" value="blue" id="c3">blue</label>
<div class="spec">
<button id="btn4">select your color</button><span id="js-3"></span>
</div>
</div>
<style>
.style1{margin: 2vw auto; width: 20vw; height: 5vw; border:0.3vw dashed burlywood; }
.style1 label{padding: 0 1vw;}
#js-3{color: red; font-size: 1.25vw;}
</style>
<script>
const btn4 = document.querySelector("#btn4");
btn4.addEventListener('click', (event) => {
let checkboxes = document.querySelectorAll("input[name='color']:checked");
let values= [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
})
document.getElementById("js-3").innerHTML = values;
})
</script>
<div class="spec style2">
<p><button id="btn5">check/uncheck all</button></p>
<label for="c1a"><input type="checkbox" name="color1" value="red" id="c1a"> red</label>
<label for="c2a"><input type="checkbox" name="color1" value="green" id="c2a"> green</label>
<label for="c3a"> <input type="checkbox" name="color1" value="blue" id="c3a"> blue</label>
</div>
<style>
.style2{margin: 0 auto; width: 20vw; height: 7vw; border: 0.3vw dotted orange;}
.style2 label{display: inline-block; width: 6vw; height:auto; }
</style>
<script>
function checking(checked = true) {
const checkboxes = document.querySelectorAll('input[name="color1"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}
function checkAll() {
checking();
this.onclick = uncheckAll;
}
function uncheckAll() {
checking(false);
this.onclick = checkAll;
}
const btn5 = document.querySelector('#btn5');
btn5.onclick = checkAll;
</script>
<div class="spec">
<form class="style3">
<input type="checkbox" id="checkId"> Are you sure?
<button type="button" class="check" onclick="checkIt()">Yes</button>
<button type="button" class="uncheck" onclick="uncheckIt()">No</button>
</form>
</div>
<style>
.style3{margin: 0 auto; width: 25vw; height: 2vw; border: 0.3vw solid burlywood;padding: 1vw;}
</style>
<script>
function checkIt() {
let inputs = document.getElementById('checkId');
inputs.checked = true;
}
function uncheckIt() {
let inputs = document.getElementById('checkId');
inputs.checked = false;
}
window.onload = function() {
window.addEventListener('load', check, false);
}
</script>
<div class="spec">
<h4> Select the programming language, you know </h4>
<div class="style4">
<tr>
<td> Java: <input type="checkbox" class="chkbox" name="pl" value="Java"> </td>
<td> PHP: <input type="checkbox" class="chkbox" name="pl" value="PHP"> </td>
</tr>
<tr>
<td> Angular: <input type="checkbox" class="chkbox" name="pl" value="Angular"> </td>
<td> CSS: <input type="checkbox" class="chkbox" name="pl" value="CSS"> </td>
</tr>
<tr>
<td> Python: <input type="checkbox" class="chkbox" name="pl" value="Python"> </td>
<td> Android: <input type="checkbox" class="chkbox" name="pl" value="Android"> </td>
</tr>
<button id="but" onclick="show()">Submit</button> <br>
</div>
<h4 style="color:green" id="res"></h4>
</div>
<style>
.style4{margin: 0 auto; width: 15vw; height: 15vw; border: 0.3vw inset burlywood;display: grid;grid-template-columns: 10vw 5vw;}
#res{display: inine-block; margin-left: 45vw;}
</style>
<script>
// document.getElementById('but'.onclick = function() {
function show(){
var markedCheckbox = document.getElementsByName('pl');
for (var checkbox of markedCheckbox) {
if (checkbox.checked)
document.getElementById("res").innerHTML += checkbox.value + (', ');
}
};
</script>
<div class="spec">
<h4> Select the programming language, you know </h4>
<div class="style5">
<tr>
<td> Java: <input type="checkbox" name="pla" value="Java"> </td>
<td> PHP: <input type="checkbox" name="pla" value="PHP"> </td>
</tr>
<tr>
<td> Angular: <input type="checkbox" name="pla" value="Angular"> </td>
<td> CSS: <input type="checkbox" name="pla" value="CSS"> </td>
</tr>
<tr>
<td> Python: <input type="checkbox" name="pla" value="Python"> </td>
<td> Android: <input type="checkbox" name="pla" value="Android"> </td>
</tr>
<button id="but_b">Submit</button> <br>
</div>
<h4 style="color:green" id="res_b"></h4>
</div>
<style>
.style5{width: 25vw; height: 15vw; border: 0.3vw inset burlywood;display: grid;grid-template-columns: 10vw 5vw; }
.style input[name=pla]{width: 1vw; height: 1vw;}
#res_b{display: inine-block; margin-left: 45vw;}
</style>
<script>
document.getElementById('but_b').onclick = function() {
var markedCheckbox = document.querySelectorAll('input[name="pla"]:checked');
for (var checkbox of markedCheckbox) {
document.getElementById("res_b").innerHTML += (checkbox.value + ', ');
}
}
</script>
Check all the languages you have proficiency in.
<div class="spec ">
<p class="spec">Check all the languages you have proficiency in.</p>
<form class="style6">
<input type="checkbox" name="plb" id="HTML" value="HTML" onclick="functionOne()"><label for="HTML"> HTML</label><br>
<input type="checkbox" name="plb" id="CSS" value="CSS" onclick="functionTwo()"><label for="CSS"> CSS</label><br>
<input type="checkbox" name="plb" id="JS" value="JS" onclick="functionThree()"><label for="JS"> JS</label><br>
<input type="checkbox" name="plb" id="PHP" value="PHP" onclick="functionFour()"><label for="PHP"> PHP</label><br>
<input type="checkbox" name="plb" id="Ruby" value="Ruby" onclick="functionFive()"><label for="Ruby"> Ruby</label><br>
<input type="checkbox" name="plb" id="INTERCAL" value="INTERCAL" onclick="functionSix()"><label for="INTERCAL">
INTERCAL</label><br>
</form>
<div class="result">Results:
<p class="spec" id="HTML_text" style="display:none">HTML</p>
<p class="spec" id="CSS_text" style="display:none">CSS</p>
<p class="spec" id="JS_text" style="display:none">JS</p>
<p class="spec" id="PHP_text" style="display:none">PHP</p>
<p class="spec" id="Ruby_text" style="display:none">Ruby</p>
<p class="spec" id="INTERCAL_text" style="display:none">INTERCAL</p>
</div>
</div>
<style>
.style6{margin: 0 auto; width: 25vw; height: 15vw; border: 0.3vw inset burlywood;display: grid;grid-template-columns: 10vw 10vw 10vw;}
.result{margin-left: 30vw;}
.style6 input[name=plb]{width: 2vw; height: 2vw;}
</style>
<script>
function functionOne() {
var checkBox = document.getElementById("HTML");
var text = document.getElementById("HTML_text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function functionTwo() {
var checkBox = document.getElementById("CSS");
var text = document.getElementById("CSS_text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function functionThree() {
var checkBox = document.getElementById("JS");
var text = document.getElementById("JS_text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function functionFour() {
var checkBox = document.getElementById("PHP");
var text = document.getElementById("PHP_text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function functionFive() {
var checkBox = document.getElementById("Ruby");
var text = document.getElementById("Ruby_text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function functionSix() {
var checkBox = document.getElementById("INTERCAL");
var text = document.getElementById("INTERCAL_text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
<div>
<h4> Select the subject, you are interested in (only one!)</h4>
<div class="spec style7">
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td>
</tr>
<tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr>
<tr>
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
</tr>
</div>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result_a"></h4>
<h4 id="result_ab"></h4>
</div>
<style>
.style7{margin: 0 auto; width: 25vw; height: 15vw; border: 0.3vw inset burlywood;display: grid;grid-template-columns: 10vw 5vw; margin-left: 2vw;}
</style>
<script>
function checkAll() {
var inputs = document.querySelectorAll('.ss');
for (var k = 0; k < inputs.length; k++) {
inputs[k].checked = true;
}
return document.getElementById("result_a").innerHTML = "You have selected all subjects"
}
function getCheckboxValue() {
var sub1 = document.getElementById("s1");
var sub2 = document.getElementById("s2");
var sub3 = document.getElementById("s3");
var sub4 = document.getElementById("s4");
var sub5 = document.getElementById("s5");
var sub6 = document.getElementById("s6");
var result=" ";
if (sub1.checked == true){
var ss1 = document.getElementById("s1").value;
result = ss1 + ",";
}
else if (sub2.checked == true){
var ss2 = document.getElementById("s2").value;
result = result + ss2 + ",";
}
else if (sub3.checked == true){
var ss3 = document.getElementById("s3").value;
result = result + ss3 + ",";
}
else if (sub4.checked == true){
var ss4 = document.getElementById("s4").value;
result = result + ss4 + ",";
}
else if (sub5.checked == true){
var ss5 = document.getElementById("s5").value;
result = result + ss5 + ",";
}
else if (sub6.checked == true){
var ss6 = document.getElementById("s6").value;
result = result + ss6;
} else {
return document.getElementById("result_ab").innerHTML = "please,select any one";
}
return document.getElementById("result_ab").innerHTML += "You have selected " + result + " subjects";
}
</script>
<div class="style8">
<label for="chkPassport"><input type="checkbox" id="chkPassport" onclick="ShowHideDiv(this)" />Do you have passport?</label>
<br><br>
<div id="dvPassport" style="display: none">Passport number:<input type="text" id="txtPassportNumber" /></div>
</div>
<style>
.style8{width: 25vw; height: 10vw; margin: 0 auto;}
</style>
<script>
function ShowHideDiv(chkPassport) {
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = chkPassport.checked ? "block" : "none";
}
</script>
<div class="style9">
<form action="">
<label for="name">name:</label><input type="text" name="name"><br>
<label for="language">Do you speak English fluently?</label><input type="checkbox"
onclick="checkFluency()" id="fluency" checked />
<p id="fluent"></p>
</form>
</div>
<style>
.style9{width: 25vw; height: 10vw; margin: 0 auto;}
#fluent{color: red;}
</style>
<script>
function checkFluency(){
var checkbox = document.getElementById('fluency');
if (checkbox.checked != true){
document.getElementById("fluent").innerHTML = "Sorry, but you need to be fluent in English to apply for the job!";
}
}
</script>
<div class="style10">
<label for="status">Web Technology:</label><br>
<input type="checkbox" id="html"> HTML
<input type="checkbox" id="css"> CSS
<input type="checkbox" id="js"> JavaScript
<p class="spec" id="resultaat"></p>
</div>
<style>
.style10{width: 25vw; height: 10vw; margin: 0 auto;display: block;}
#resultaat{color: red;}
</style>
<script>
let resultaat = document.querySelector('#resultaat');
document.body.addEventListener('change', function (e) {
let target = e.target;
let message;
switch (target.id) {
case 'html':
message = 'The HTML checkbox changed';
break;
case 'css':
message = 'The CSS checkbox changed';
break;
case 'js':
message = 'The JavaScript checkbox changed';
break;
}
resultaat.textContent = message;
});
</script>
<div class="checklist-1">
<label><input type="checkbox" class="check" id="one" /><i></i><span>Item #1</span></label>
<label><input type="checkbox" class="check" id="two" /><i></i><span>Item #2</span></label>
<label><input type="checkbox" class="check" id="three" /><i></i><span>Item #3</span><label>
</div>
<style>
.checklist-1 { width: 25vw; height: 20vw; margin: 0 auto; padding: 1vw; position: relative; background: #043b3e; border-top: 2vw solid #03a2f4;}
.checklist-1 label {position: relative; display: block; margin: 1vw 0; color: skyblue; font-size: 1.25vw; cursor: pointer;}
.checklist-1 input[type="checkbox"] {-webkit-appearance: none; appearance: none;}
.checklist-1 i {position: absolute; top: 0.2vw; display: inline-block; width: 2vw; height: 2vw; border: .2vw solid #fff; }
.checklist-1 input[type="checkbox"]:checked ~ i { top: 0.1vw; height: 1.5vw; width: 2.5vw; border-top: none; border-right: none; transform: rotate(-45deg);}
.checklist-1 span {position: relative; left: 4vw; transition: 0.5s; }
.checklist-1 span:before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: .1vw; background: red; transform: translateY(-50%) scaleX(0);
transform-origin: left;transition: transform 0.5s; }
.checklist-1 input[type="checkbox"]:checked ~ span:before {transform: translateY(-50%) scaleX(1); transform-origin: right; transition: transform 0.5s; }
.checklist-1 input[type="checkbox"]:checked ~ span { color: #154e6b;}
</style>
<form action="" class="spec style11">
<label class="form-control"><input type="checkbox" name="checkbox" class="check"/>Checkbox</label>
<label class="form-control"><input type="checkbox" name="checkbox-checked" class="check"checked />Checkbox - checked</label>
<label class="form-control form-control--disabled"><input type="checkbox" name="checkbox-disabled" class="check" disabled />Checkbox Disabled</label>
<label class="form-control form-control--disabled">
<input type="checkbox" name="checkbox-disabled-checked" class="custom" checked disabled />Checkbox Disabled - checked</label>
</form>
<style>
.style11{margin-left: 35vw;}
.style11 :root {--form-control-color: rebeccapurple; --form-control-disabled: #959495; }
.style11 .form-control {font-family: system-ui, sans-serif; font-size: 1.5vw; font-weight: bold; line-height: 1.1; display: grid; grid-template-columns: 10vw 20vw; gap: 1vw; }
.style11 .form-control + .form-control {margin-top: 2vw;}
.style11 .form-control--disabled {color: var(--form-control-disabled);cursor: not-allowed;}
.style11 input[type="checkbox"] .check{/* Add if not using autoprefixer */-webkit-appearance: none;/* Remove most all native input styles */appearance: none;/* For iOS < 15 */
background-color: var(--form-background);/* Not removed via appearance */ margin: 0; font: inherit; color: currentColor; width: 2vw; height: 2vw; border: 0.5vw solid currentColor;
border-radius: 0.15vw; transform: translateY(-0.075vw); display: grid; place-content: center;}
.style11 input[type="checkbox"]::before {content: ""; width: 2vw; height: 2vw; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0);
transform-origin: bottom left;transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color);/* Windows High Contrast Mode */background-color: CanvasText;}
.style11 input[type="checkbox"]:checked::before {transform: scale(1); }
.style11 input[type="checkbox"]:focus {outline: max(0.25vw, 0.5vw) solid currentColor; outline-offset: max(0.2vw, .3vw);}
.style11 input[type="checkbox"]:disabled {--form-control-color: var(--form-control-disabled); color: var(--form-control-disabled); cursor: not-allowed; }
</style>
<div class="container" style="margin-left: 35vw;">
<div class="round">
<input type="checkbox" checked id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
<style>
.round {position: relative;}
.round label {background-color: #fff; border: .1vw solid #ccc; border-radius: 50%;
cursor: pointer;
height: 2.8vw; left: 0; position: absolute; top: 0; width: 2.8vw;}
.round label:after { border: 0.2vw solid #fff; border-top: none; border-right:
none; content: "";
height: .6vw; left: .7vw; opacity: 0; position: absolute; top: .8vw;
transform: rotate(-45deg);width: 1.2vw;}
.round input[type="checkbox"] {visibility: hidden;}
.round input[type="checkbox"]:checked + label {background-color: #66bb6a;
border-color: #66bb6a;}
.round input[type="checkbox"]:checked + label:after { opacity: 1;}
</style>
<style>
.custom-restricted-width {margin-left: 35vw;/* To limit the menu width to the content of the menu: */ display: inline-block; /* Or set the width explicitly: */ /* width: 10em; */}
</style>
<div class="pure-menu custom-restricted-width">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>
</ul>
</div>
<ol class="list-numbered">
<li>Line Item #1</li>
<li>Line Item #2</li>
<li>Line Item #3</li>
<li>Line Item #4</li>
<li>Line Item #5</li>
</ol>
<style>
.list-numbered {list-style: none; margin-left: 35vw; counter-reset: line;}
.list-numbered > li {position: relative; margin-bottom: 1.5vw;}
.list-numbered > li:before {position: absolute; left: -2.25vw; display: inline-block; width: 2.2vw; height: 2.2vw; margin-right: .2vw; background-color: #B53C2C;border-radius: 50%;
color: #fff; text-align:center; line-height: 2.2vw; counter-increment: line; content: counter(line);}
</style>
<div class="spec"style=" margin-left: 35vw;">
<ul>
<li><input class="toggle" id="d1" type="checkbox"><label for="d1">Checkbox</label></li>
<li><input class="toggle" id="d2" type="checkbox" checked><label for="d2">Checkbox</label></li>
<li><input class="toggle" id="t1" type="radio" name="radio" value="1"><label for="t1">Radio</label></li>
<li><input class="toggle" id="t2" type="radio" name="radio" value="2" checked><label for="t2">Radio</label></li>
<li><input class="toggle" id="u1" type="checkbox" class="switch"><label for="u1">Switch</label></li>
<li><input class="toggle" id="u2" type="checkbox" class="switch" checked><label for="u2">Switch</label></li>
</ul>
<ul>
<li><input class="toggle" id="d1d" type="checkbox" disabled><label for="d1d">Checkbox</label></li>
<li><input class="toggle" id="d2d" type="checkbox" checked disabled><label for="d2d">Checkbox</label></li>
<li><input class="toggle" id="t1d" type="radio" name="radiod" value="1" disabled><label for="t1d">Radio</label></li>
<li><input class="toggle" id="t2d" type="radio" name="radiod" value="2" checked disabled><label for="t2d">Radio</label></li>
<li><input class="toggle" id="u1d" type="checkbox" class="switch" disabled><label for="u1d">Switch</label></li>
<li><input class="toggle" id="u2d" type="checkbox" class="switch" checked disabled><label for="u2d">Switch</label></li>
</ul>
</div>
<style>
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
.toggle[type='checkbox']:not(.check), input[type='radio'] { --active: #275EFE; --active-inner: #fff; --focus: 2px
rgba(39, 94, 254, .3); --border: #BBC1E1; --border-hover: #275EFE;
--background: #fff; --disabled: #F6F8FF; --disabled-inner: #E1E6F9; -webkit-appearance: none; -moz-appearance: none;
height: 2vw; outline: none; appearance: none; height: 2vw; outline: none; display: inline-block; vertical-align: top;
position: relative; margin: 0; cursor: pointer; border: 0.2vw solid var(--bc, var(--border)); background: var(--b,
var(--background)); transition: background .3s, border-color .3s, box-shadow .2s;}
.toggle[type='checkbox']:not(.check):after, input[type='radio']:after {content: ''; display: block; left: 0; top: 0;
position: absolute; transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);}
.toggle[type='checkbox']:not(.check):checked, input[type='radio']:checked {--b: var(--active); --bc: var(--active);
--d-o: .3s; --d-t: .6s; --d-t-e: cubic-bezier(.2, .85, .32, 1.2);}
.toggle[type='checkbox']:not(.check):disabled, input[type='radio']:disabled {--b: var(--disabled); cursor: not-allowed;
opacity: .9;}
.toggle[type='checkbox']:not(.check):disabled:checked, input[type='radio']:disabled:checked {--b: var(--disabled-inner);
--bc: var(--border);}
.toggle[type='checkbox']:not(.check):disabled:checked, input[type='radio']:disabled:checked + label {cursor: not-allowed;}
.toggle[type='checkbox']:not(.check):hover:not(:checked):not(:disabled), input[type='radio']:hover:not(:checked):
not(:disabled){--bc: var(--border-hover);}
.toggle[type='checkbox']:not(.check):focus, input[type='radio']:focus{box-shadow: 0 0 0 var(--focus);}
.toggle[type='checkbox']:not(.switch), input[type='radio']:not(.switch){width: 2.1vw;}
.toggle[type='checkbox']:not(.switch):after, input[type='radio']:not(.switch):after{opacity: var(--o, 0);}
.toggle[type='checkbox']:not(.switch):checked, input[type='radio']:not(.switch):checked{--o: 1;}
.toggle[type='checkbox']:not(.check), input[type='radio'] + label {font-size: 1.4vw; line-height: 2vw; display:
inline-block; vertical-align: top; cursor: pointer; margin-left: .4vw; }
.toggle[type='checkbox']:not(.switch) {border-radius: .7vw;}
.toggle[type='checkbox']:not(.switch):after { width: .5vw; height: .9vw; border: .2vw solid var(--active-inner);
border-top: 0; border-left: 0; left: .7vw; top: .4vw; transform: rotate(var(--r, 20deg));}
.toggle[type='checkbox']:not(.switch):checked {--r: 43deg;}
.toggle[type='checkbox'].switch {width: 3.8vw; border-radius: 1.1vw;}
.toggle[type='checkbox'].switch:after {left: .2vw; top: .2vw; border-radius: 50%; width: 1.5vw; height: 1.5vw;
background: var(--ab, var(--border)); transform: translateX(var(--x, 0));}
.toggle[type='checkbox'].switch:checked {--ab: var(--active-inner);--x: 1.7vw;}
.toggle[type='checkbox'].switch:disabled:not(:checked):after {opacity: .6;}
.toggl[type='radio'] {border-radius: 50%;}
.toggle[type='radio']:after {width: 1.9vw; height: 1.9vw; border-radius: 50%; background: var(--active-inner);
opacity: 0; transform: scale(var(--s, .7));}
.toggle[type='radio']:checked {--s: .5;}
ul {margin: 1.2vw; padding: 0; list-style: none; width: 100%; max-width: 32vw;}
ul li { margin: 1.6vw 0; position: relative;}
}
</style>