{"loaderData":{"0":null,"0-3":{"total":7283,"projects":[{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"8490f2","snapshot":null,"tags":null,"title":"checkbox by sujeet-12","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1821,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n animation: jello-horizontal 0.9s both;\n}\n\n.checkmark:hover {\n animation: jello-horizontal 0.9s both;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n border-radius: 50%;\n background-color: #eee;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: royalblue;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n/* Style the checkmark/indicator */\n.container .checkmark:after {\n left: 0.45em;\n top: 0.25em;\n width: 0.25em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}\n\n@keyframes jello-horizontal {\n 0% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(0.95, 1.05, 1);\n transform: scale3d(0.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, 0.95, 1);\n transform: scale3d(1.05, 0.95, 1);\n }\n\n 100% {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e940b2","snapshot":null,"tags":null,"title":"checkbox by sans-script","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":61,"cssLen":588,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\t\n

","css":".center {\n width: 100%;\n text-align: center;\n}\n\ninput[type=\"checkbox\"] {\n position: relative;\n top: 8px;\n width: 40px;\n height: 40px;\n -webkit-appearance: none;\n outline: none;\n transition: 0.5s;\n}\n\ninput[type=\"checkbox\"]:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 4px solid #262626;\n box-sizing: border-box;\n transition: 0.5s;\n}\n\ninput:checked[type=\"checkbox\"]:before {\n border-left: none;\n border-top: none;\n width: 20px;\n border-color: rgb(24, 196, 24);\n transform: rotate(45deg) translate(5px, -10px);\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"ba7c39","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":665,"cssLen":1088,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .chevron-right {\n position: absolute;\n animation: keyframes-return .5s;\n}\n\n.container .chevron-down {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .chevron-right {\n display: none;\n}\n\n.container input:checked ~ .chevron-down {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: rotate(-90deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(0deg) scale(1.2);\n }\n}\n\n@keyframes keyframes-return {\n 0% {\n transform: rotate(90deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(0deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e94ce6","snapshot":null,"tags":null,"title":"checkbox by faxriddin20","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":790,"cssLen":3402,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

\n\n \n

\n","css":".checkbox-wrapper-12 {\n position: relative;\n}\n\n.checkbox-wrapper-12 > svg {\n position: absolute;\n top: -130%;\n left: -170%;\n width: 110px;\n pointer-events: none;\n}\n\n.checkbox-wrapper-12 * {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-12 input[type=\"checkbox\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n -webkit-tap-highlight-color: transparent;\n cursor: pointer;\n margin: 0;\n}\n\n.checkbox-wrapper-12 input[type=\"checkbox\"]:focus {\n outline: 0;\n}\n\n.checkbox-wrapper-12 .cbx {\n width: 24px;\n height: 24px;\n top: calc(100px - 12px);\n left: calc(100px - 12px);\n}\n\n.checkbox-wrapper-12 .cbx input {\n position: absolute;\n top: 0;\n left: 0;\n width: 24px;\n height: 24px;\n border: 2px solid #bfbfc0;\n border-radius: 50%;\n}\n\n.checkbox-wrapper-12 .cbx label {\n width: 24px;\n height: 24px;\n background: none;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n transform: trasnlate3d(0, 0, 0);\n pointer-events: none;\n}\n\n.checkbox-wrapper-12 .cbx svg {\n position: absolute;\n top: 5px;\n left: 4px;\n z-index: 1;\n pointer-events: none;\n}\n\n.checkbox-wrapper-12 .cbx svg path {\n stroke: #fff;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 19;\n stroke-dashoffset: 19;\n transition: stroke-dashoffset 0.3s ease;\n transition-delay: 0.2s;\n}\n\n.checkbox-wrapper-12 .cbx input:checked + label {\n animation: splash-12 0.6s ease forwards;\n}\n\n.checkbox-wrapper-12 .cbx input:checked + label + svg path {\n stroke-dashoffset: 0;\n}\n\n@-moz-keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n\n@-webkit-keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n\n@-o-keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n\n@keyframes splash-12 {\n 40% {\n background: lime;\n box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,\n 0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;\n }\n\n 100% {\n background: lime;\n box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,\n 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,\n -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n }\n}\n"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"6a719e","snapshot":null,"tags":null,"title":"checkbox by JaydipPrajapati1910","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":138,"cssLen":643,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n \n

","css":".clear {\n clear: both;\n}\n\n.checkBox {\n display: block;\n cursor: pointer;\n width: 30px;\n height: 30px;\n border: 3px solid rgba(255, 255, 255, 0);\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n box-shadow: 0px 0px 0px 2px black;\n}\n\n.checkBox div {\n width: 60px;\n height: 60px;\n background-color: black;\n top: -52px;\n left: -52px;\n position: absolute;\n transform: rotateZ(45deg);\n z-index: 100;\n}\n\n.checkBox input[type=checkbox]:checked + div {\n left: -10px;\n top: -10px;\n}\n\n.checkBox input[type=checkbox] {\n position: absolute;\n left: 50px;\n visibility: hidden;\n}\n\n.transition {\n transition: 300ms ease;\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"07798e","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1246,"cssLen":928,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .star-regular {\n position: absolute;\n animation: keyframes-star .5s;\n}\n\n.container .star-solid {\n position: absolute;\n animation: keyframes-star .5s;\n display: none;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .star-regular {\n display: none;\n}\n\n.container input:checked ~ .star-solid {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animations ------ */\n@keyframes keyframes-star {\n 0% {\n transform: rotate(0deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(10deg) scale(1.3);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e8b6d6","snapshot":null,"tags":null,"title":"checkbox by Shoh2008","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":133,"cssLen":3800,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".checkbox-wrapper-19 {\n box-sizing: border-box;\n --background-color: #fff;\n --checkbox-height: 25px;\n}\n\n@-moz-keyframes dothabottomcheck-19 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) / 2);\n }\n}\n\n@-webkit-keyframes dothabottomcheck-19 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) / 2);\n }\n}\n\n@keyframes dothabottomcheck-19 {\n 0% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) / 2);\n }\n}\n\n@keyframes dothatopcheck-19 {\n 0% {\n height: 0;\n }\n\n 50% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) * 1.2);\n }\n}\n\n@-webkit-keyframes dothatopcheck-19 {\n 0% {\n height: 0;\n }\n\n 50% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) * 1.2);\n }\n}\n\n@-moz-keyframes dothatopcheck-19 {\n 0% {\n height: 0;\n }\n\n 50% {\n height: 0;\n }\n\n 100% {\n height: calc(var(--checkbox-height) * 1.2);\n }\n}\n\n.checkbox-wrapper-19 input[type=checkbox] {\n display: none;\n}\n\n.checkbox-wrapper-19 .check-box {\n height: var(--checkbox-height);\n width: var(--checkbox-height);\n background-color: transparent;\n border: calc(var(--checkbox-height) * .1) solid #000;\n border-radius: 5px;\n position: relative;\n display: inline-block;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -moz-transition: border-color ease 0.2s;\n -o-transition: border-color ease 0.2s;\n -webkit-transition: border-color ease 0.2s;\n transition: border-color ease 0.2s;\n cursor: pointer;\n}\n\n.checkbox-wrapper-19 .check-box::before,\n .checkbox-wrapper-19 .check-box::after {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: absolute;\n height: 0;\n width: calc(var(--checkbox-height) * .2);\n background-color: #34b93d;\n display: inline-block;\n -moz-transform-origin: left top;\n -ms-transform-origin: left top;\n -o-transform-origin: left top;\n -webkit-transform-origin: left top;\n transform-origin: left top;\n border-radius: 5px;\n content: \" \";\n -webkit-transition: opacity ease 0.5;\n -moz-transition: opacity ease 0.5;\n transition: opacity ease 0.5;\n}\n\n.checkbox-wrapper-19 .check-box::before {\n top: calc(var(--checkbox-height) * .72);\n left: calc(var(--checkbox-height) * .41);\n box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);\n -moz-transform: rotate(-135deg);\n -ms-transform: rotate(-135deg);\n -o-transform: rotate(-135deg);\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n}\n\n.checkbox-wrapper-19 .check-box::after {\n top: calc(var(--checkbox-height) * .37);\n left: calc(var(--checkbox-height) * .05);\n -moz-transform: rotate(-45deg);\n -ms-transform: rotate(-45deg);\n -o-transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n\n.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,\n .checkbox-wrapper-19 .check-box.checked {\n border-color: #34b93d;\n}\n\n.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,\n .checkbox-wrapper-19 .check-box.checked::after {\n height: calc(var(--checkbox-height) / 2);\n -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;\n animation: dothabottomcheck-19 0.2s ease 0s forwards;\n}\n\n.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,\n .checkbox-wrapper-19 .check-box.checked::before {\n height: calc(var(--checkbox-height) * 1.2);\n -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;\n -o-animation: dothatopcheck-19 0.4s ease 0s forwards;\n -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;\n animation: dothatopcheck-19 0.4s ease 0s forwards;\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"b08688","snapshot":null,"tags":null,"title":"checkbox by Praashoo7","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":216,"cssLen":1681,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

\n","css":".theme-switch {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 9em;\n height: 2.5em;\n font-size: 20px;\n font-family: Montserrat;\n font-weight: 600;\n color: black;\n background-color: white;\n padding: 0.5em;\n border: 1px solid black;\n box-shadow: 6px 6px 0px black;\n transition: .4s;\n z-index: 1;\n}\n\n.name::before {\n color: black;\n content: \"Dark Mode\";\n margin-right: 2em;\n transition: .2s ease-in-out;\n}\n\n.name::after {\n color: black;\n content: \"Light Mode\";\n margin-right: 1.7em;\n transition: .2s ease-in-out;\n display: none;\n}\n\n.theme-switch .slider {\n position: absolute;\n background-color: #222;\n margin-left: 6.2em;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n border: 4px solid #222;\n transform: rotate(-120deg);\n box-shadow: inset 0px 6px #999, inset 0px 6px 1px 1px #999;\n -moz-box-shadow: inset 0px 6px #999, inset 0px 6px 1px 1px #999;\n}\n\n.theme-switch:hover {\n color: white;\n cursor: pointer;\n box-shadow: none;\n transform: translateX(6px) translateY(6px);\n background-color: black;\n border: none;\n}\n\n.theme-switch:hover .name::before {\n color: white;\n}\n\n.theme-switch:hover .name::after {\n color: white;\n}\n\n.theme-switch input[type=checkbox]:checked + .slider {\n transform: rotate(360deg);\n box-shadow: none;\n border: 4px solid #F28C38;\n background-color: #F28C38;\n}\n\n.theme-switch input[type=checkbox]:checked ~ .name::before {\n display: none;\n}\n\n.theme-switch input[type=checkbox]:checked ~ .name::after {\n display: block;\n}\n\n.theme-switch input[type=checkbox] {\n position: absolute;\n visibility: hidden;\n}\n\n.slider {\n transition: 300ms ease;\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"306d86","snapshot":null,"tags":null,"title":"checkbox by gagan-gv","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1005,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n position: relative;\n cursor: pointer;\n font-size: 17px;\n width: 2em;\n height: 2em;\n border-radius: 50%;\n user-select: none;\n border: 5px solid white;\n display: block;\n}\n\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.checkmark:after {\n content: '';\n position: absolute;\n top: 25%;\n left: 25%;\n background-color: white;\n width: 50%;\n height: 50%;\n border-radius: 50%;\n transform: scale(0);\n transition: 100ms ease;\n}\n\n.container input:checked ~ .checkmark:after {\n transform: scale(1);\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"75b2ae","snapshot":null,"tags":null,"title":"checkbox by Smit-Prajapati","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":714,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".checkbox {\n appearance: none;\n overflow: hidden;\n min-width: 30px;\n aspect-ratio: 1/1;\n border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;\n border: 2px solid rgb(255, 102, 0);\n position: relative;\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox::before {\n position: absolute;\n inset: 0;\n content: \"\";\n font-size: 35px;\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox:checked {\n border: 2px solid rgb(255, 212, 59);\n background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);\n box-shadow: -5px -5px 30px rgba(255, 212, 59, 1), 5px 5px 30px rgba(255, 102, 0, 1);\n}\n\n.checkbox:checked::before {\n background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"512672","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1653,"cssLen":880,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .eye {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .eye-slash {\n position: absolute;\n animation: keyframes-fill .5s;\n display: none;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .eye {\n display: none;\n}\n\n.container input:checked ~ .eye-slash {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2);\n }\n}"}]}},"actionData":null,"errors":null}