.checkbox-ios { display: inline-block; height: 20px; vertical-align: middle; width: 35px; } .checkbox-ios input[type=checkbox] { max-height: 0; max-width: 0; opacity: 0; position: absolute; } .checkbox-ios input[type=checkbox] + label { border-radius: 24px; border: 2px solid #212529; cursor: pointer; display: block; height: 20px; margin-bottom: 0; margin-top: 0; position: relative; text-indent: -5000px; width: 35px; } .checkbox-ios input[type=checkbox] + label:before { background: #212529; border-radius: 24px; content: ""; display: block; height: 15px; left: 1px; position: absolute; top: 1px; transition: .1s ease-in-out; width: 15px; } .checkbox-ios input[type=checkbox]:checked + label { border-color: #212529; } .checkbox-ios input[type=checkbox]:focus + label { box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); outline: 0; } .checkbox-ios input[type=checkbox]:checked + label:before { background: #212529; left: 16px; } .checkbox-ios input[type=checkbox] + label:after { border-color: #212529; border-style: solid; border-width: 0px 0px 2px 2px; content: ""; display: block; height: 5px; left: 7px; opacity: 0; position: absolute; top: 8px; transform: translate3d(-50%, -50%, 0px) rotate(-45deg); transition: .1s ease-in-out; width: 7px; } .checkbox-ios input[type=checkbox]:checked + label:after { border-color: #212529; opacity: 1; }