Answer:

< head > < title > Bulb < /title > < /head > < body > < main > < input class="l"type="checkbox" > < /main > < style > *,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}:root{/*minFontSize+(maxFontSize-minFontSize)*(100vw-minVWidth)/(maxVWidth-minVWidth)*/font-size:calc(64px+(80-64)*(100vw-320px)/(960-320));}body,input{font-size:1em;line-height:1.5;}body{background:#bbb;}input{display:block;margin-bottom:1.5em;}main{padding:1.5em 0 0 0;text-align:center;}.l{background-color:rgba(0,0,0,0.7);border-radius:0.75em;box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.3)inset;color:#fdea7b;display:inline-flex;align-items:center; margin:auto;padding:0.15em;width:3em;height:1.5em;transition:background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;-webkit-APPEARANCE:none;-moz-appearance:none;appearance:none;}.l:before,.l:after{content:"";display:block;}.l:before{background-color:#d7d7d7;border-radius:50%;width:1.2em;height:1.2em;transition:background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;z-index: 1;}.l:after{background:linear-gradient(transparent 50%, rgba(0,0,0,0.15)0)0 50%/50% 100%,repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%)0 50%/50% 100%, radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);background-repeat:no-repeat;border:0.25em solid transparent;border-left:0.4em solid#d8d8d8;border-right:0 solid transparent;transition:border-left-color 0.1s 0.3s ease-out,transform 0.3s ease-out;transform:translateX(-22.5%);transform-origin:25% 50%;width:1.2em;height:1em;}/*Checked*/.l:checked{background-color:rgba(0,0,0,0.45);box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;}.l:checked:before{background-color:currentColor;transform: translateX(125%)}.l:checked:after{border-left-color:currentColor;transform:translateX(-2.5%) rotateY(180deg);}/*Other States*/.l:focus{/*Usually an anti-A11Y practice but set to remove an annoyance just for this demo*/outline:0;} < /style > < /body > < /html >" class="latex-formula" id="TexFormula1" src="https://tex.z-dn.net/?f=%20%3C%20%21DOCTYPE%20html%20%3E%20%3C%20html%20lang%3D%22en%22%20%3E%20%3C%20head%20%3E%20%3C%20title%20%3E%20Bulb%20%3C%20%2Ftitle%20%3E%20%3C%20%2Fhead%20%3E%20%3C%20body%20%3E%20%3C%20main%20%3E%20%3C%20input%20class%3D%22l%22type%3D%22checkbox%22%20%3E%20%3C%20%2Fmain%20%3E%20%3C%20style%20%3E%20%2A%2C%2A%3Abefore%2C%2A%3Aafter%7Bbox-sizing%3Aborder-box%3Bmargin%3A0%3Bpadding%3A0%3B%7D%3Aroot%7B%2F%2AminFontSize%2B%28maxFontSize-minFontSize%29%2A%28100vw-minVWidth%29%2F%28maxVWidth-minVWidth%29%2A%2Ffont-size%3Acalc%2864px%2B%2880-64%29%2A%28100vw-320px%29%2F%28960-320%29%29%3B%7Dbody%2Cinput%7Bfont-size%3A1em%3Bline-height%3A1.5%3B%7Dbody%7Bbackground%3A%23bbb%3B%7Dinput%7Bdisplay%3Ablock%3Bmargin-bottom%3A1.5em%3B%7Dmain%7Bpadding%3A1.5em%200%200%200%3Btext-align%3Acenter%3B%7D.l%7Bbackground-color%3Argba%280%2C0%2C0%2C0.7%29%3Bborder-radius%3A0.75em%3Bbox-shadow%3A0.125em%200.125em%200%200.125em%20rgba%280%2C0%2C0%2C0.3%29inset%3Bcolor%3A%23fdea7b%3Bdisplay%3Ainline-flex%3Balign-items%3Acenter%3B%20margin%3Aauto%3Bpadding%3A0.15em%3Bwidth%3A3em%3Bheight%3A1.5em%3Btransition%3Abackground-color%200.1s%200.3s%20ease-out%2C%20box-shadow%200.1s%200.3s%20ease-out%3B-webkit-appearance%3Anone%3B-moz-appearance%3Anone%3Bappearance%3Anone%3B%7D.l%3Abefore%2C.l%3Aafter%7Bcontent%3A%22%22%3Bdisplay%3Ablock%3B%7D.l%3Abefore%7Bbackground-color%3A%23d7d7d7%3Bborder-radius%3A50%25%3Bwidth%3A1.2em%3Bheight%3A1.2em%3Btransition%3Abackground-color%200.1s%200.3s%20ease-out%2C%20transform%200.3s%20ease-out%3Bz-index%3A%201%3B%7D.l%3Aafter%7Bbackground%3Alinear-gradient%28transparent%2050%25%2C%20rgba%280%2C0%2C0%2C0.15%290%290%2050%25%2F50%25%20100%25%2Crepeating-linear-gradient%2890deg%2C%23bbb%200%2C%23bbb%2C%23bbb%2020%25%2C%23999%2020%25%2C%23999%2040%25%290%2050%25%2F50%25%20100%25%2C%20radial-gradient%28circle%20at%2050%25%2050%25%2C%23888%2025%25%2C%20transparent%2026%25%29%3Bbackground-repeat%3Ano-repeat%3Bborder%3A0.25em%20solid%20transparent%3Bborder-left%3A0.4em%20solid%23d8d8d8%3Bborder-right%3A0%20solid%20transparent%3Btransition%3Aborder-left-color%200.1s%200.3s%20ease-out%2Ctransform%200.3s%20ease-out%3Btransform%3AtranslateX%28-22.5%25%29%3Btransform-origin%3A25%25%2050%25%3Bwidth%3A1.2em%3Bheight%3A1em%3B%7D%2F%2AChecked%2A%2F.l%3Achecked%7Bbackground-color%3Argba%280%2C0%2C0%2C0.45%29%3Bbox-shadow%3A0.125em%200.125em%200%200.125em%20rgba%280%2C0%2C0%2C0.1%29%20inset%3B%7D.l%3Achecked%3Abefore%7Bbackground-color%3AcurrentColor%3Btransform%3A%20translateX%28125%25%29%7D.l%3Achecked%3Aafter%7Bborder-left-color%3AcurrentColor%3Btransform%3AtranslateX%28-2.5%25%29%20rotateY%28180deg%29%3B%7D%2F%2AOther%20States%2A%2F.l%3Afocus%7B%2F%2AUsually%20an%20anti-A11Y%20practice%20but%20set%20TO%20remove%20an%20annoyance%20just%20for%20this%20demo%2A%2Foutline%3A0%3B%7D%20%3C%20%2Fstyle%20%3E%20%3C%20%2Fbody%20%3E%20%3C%20%2Fhtml%20%3E" title="< !DOCTYPE html > < html lang="en" > < head > < title > Bulb < /title > < /head > < body > < main > < input class="l"type="checkbox" > < /main > < style > *,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}:root{/*minFontSize+(maxFontSize-minFontSize)*(100vw-minVWidth)/(maxVWidth-minVWidth)*/font-size:calc(64px+(80-64)*(100vw-320px)/(960-320));}body,input{font-size:1em;line-height:1.5;}body{background:#bbb;}input{display:block;margin-bottom:1.5em;}main{padding:1.5em 0 0 0;text-align:center;}.l{background-color:rgba(0,0,0,0.7);border-radius:0.75em;box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.3)inset;color:#fdea7b;display:inline-flex;align-items:center; margin:auto;padding:0.15em;width:3em;height:1.5em;transition:background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;}.l:before,.l:after{content:"";display:block;}.l:before{background-color:#d7d7d7;border-radius:50%;width:1.2em;height:1.2em;transition:background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;z-index: 1;}.l:after{background:linear-gradient(transparent 50%, rgba(0,0,0,0.15)0)0 50%/50% 100%,repeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%)0 50%/50% 100%, radial-gradient(circle at 50% 50%,#888 25%, transparent 26%);background-repeat:no-repeat;border:0.25em solid transparent;border-left:0.4em solid#d8d8d8;border-right:0 solid transparent;transition:border-left-color 0.1s 0.3s ease-out,transform 0.3s ease-out;transform:translateX(-22.5%);transform-origin:25% 50%;width:1.2em;height:1em;}/*Checked*/.l:checked{background-color:rgba(0,0,0,0.45);box-shadow:0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;}.l:checked:before{background-color:currentColor;transform: translateX(125%)}.l:checked:after{border-left-color:currentColor;transform:translateX(-2.5%) rotateY(180deg);}/*Other States*/.l:focus{/*Usually an anti-A11Y practice but set to remove an annoyance just for this demo*/outline:0;} < /style > < /body > < /html >">

Explanation:

Pls MARK as BRAINEST answer and follow me pls