I've been looking for a good way to put a toggle switch into a design. But, when searching for a standard way to do this, all I came across are toggle switches created through a combination of HTML and CSS. See an example from w3 below:
/* The switch - the box around the slider */.switch { position: relative; display: inline-block; width: 60px; height: 34px;}/* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0;}/* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}input:checked + .slider { background-color: #2196F3;}input:focus + .slider { box-shadow: 0 0 1px #2196F3;}input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}/* Rounded sliders */.slider.round { border-radius: 34px;}.slider.round:before { border-radius: 50%;}<!-- Rounded switch --><label class="switch"><input type="checkbox"><span class="slider round"></span></label>Is this the only way of creating toggle switches in HTML5?
