{"loaderData":{"0":null,"0-3":{"total":7517,"projects":[{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"fe1ae3","snapshot":null,"tags":null,"title":"checkbox by Shoh2008","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":770,"cssLen":854,"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 \n \n Checkbox\n \n

\n","css":".checkbox-wrapper-37 input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-wrapper-37 .terms-label {\n cursor: pointer;\n display: flex;\n align-items: center;\n color: white;\n}\n\n.checkbox-wrapper-37 .terms-label .label-text {\n margin-left: 10px;\n}\n\n.checkbox-wrapper-37 .checkbox-svg {\n width: 30px;\n height: 30px;\n}\n\n.checkbox-wrapper-37 .checkbox-box {\n fill: #fff;\n stroke: #ff7a00;\n stroke-dasharray: 800;\n stroke-dashoffset: 800;\n transition: stroke-dashoffset 0.6s ease-in;\n}\n\n.checkbox-wrapper-37 .checkbox-tick {\n stroke: #ff7a00;\n stroke-dasharray: 172;\n stroke-dashoffset: 172;\n transition: stroke-dashoffset 0.6s ease-in;\n}\n\n.checkbox-wrapper-37\n input[type=\"checkbox\"]:checked\n + .terms-label\n .checkbox-box,\n.checkbox-wrapper-37\n input[type=\"checkbox\"]:checked\n + .terms-label\n .checkbox-tick {\n stroke-dashoffset: 0;\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"6f153a","snapshot":null,"tags":null,"title":"checkbox by KSAplay","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":561,"cssLen":899,"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":".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: 25px;\n user-select: none;\n transition: 100ms;\n}\n\n.checkmark {\n top: 0;\n left: 0;\n height: 2em;\n width: 2em;\n transition: 100ms;\n animation: dislike_401 400ms ease;\n}\n\n.container input:checked ~ .checkmark path {\n fill: #1C7DFF;\n stroke-width: 1.2;\n stroke: #212121;\n /*same background color*/\n}\n\n.container input:checked ~ .checkmark {\n animation: like_401 400ms ease;\n}\n\n.container:hover {\n transform: scale(1.1);\n}\n\n@keyframes like_401 {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes dislike_401 {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"e8f7e5","snapshot":null,"tags":null,"title":"checkbox by PriyanshuGupta28","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":1279,"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 Checkbox\n \n

\n\n\n","css":".checkbox-wrapper-65 *,\n .checkbox-wrapper-65 ::after,\n .checkbox-wrapper-65 ::before {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-65 .cbx {\n position: relative;\n display: block;\n float: left;\n width: 18px;\n height: 18px;\n border-radius: 4px;\n background-color: #1c4780;\n background-image: linear-gradient(#0f698d, #1d3c6b);\n box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);\n transition: all 0.15s ease;\n}\n\n.checkbox-wrapper-65 .cbx svg {\n position: absolute;\n top: 3px;\n left: 3px;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke: #fff;\n stroke-width: 2;\n stroke-dasharray: 17;\n stroke-dashoffset: 17;\n transform: translate3d(0, 0, 0);\n}\n\n.checkbox-wrapper-65 .cbx + span {\n float: left;\n margin-left: 6px;\n}\n\n.checkbox-wrapper-65 {\n user-select: none;\n}\n\n.checkbox-wrapper-65 label {\n display: inline-block;\n cursor: pointer;\n}\n\n.checkbox-wrapper-65 input[type=\"checkbox\"] {\n display: none;\n visibility: hidden;\n}\n\n.checkbox-wrapper-65 input[type=\"checkbox\"]:checked + .cbx {\n background-color: #606062;\n background-image: linear-gradient(#2584d2, #1d52c1);\n}\n\n.checkbox-wrapper-65 input[type=\"checkbox\"]:checked + .cbx svg {\n stroke-dashoffset: 0;\n transition: all 0.15s ease;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"812451","snapshot":null,"tags":null,"title":"checkbox by JOBOYA","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":128,"cssLen":1070,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n Agree\n\n","css":".checkbox {\n position: relative;\n display: inline-block;\n cursor: pointer;\n font-size: 16px;\n color: #666;\n line-height: 1.5;\n margin-bottom: 20px;\n font-family: Arial, sans-serif;\n user-select: none;\n}\n\n.checkbox input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 30px;\n width: 30px;\n border: 2px solid #666;\n border-radius: 5px;\n transition: all 0.2s ease-in-out;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.checkbox:hover .checkmark {\n transform: translateX(-20px) translateY(-2px) rotate(10deg);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);\n}\n\n.checkbox input:checked ~ .checkmark {\n background-color: #666;\n border-color: #666;\n}\n\n.checkbox input:checked ~ .checkmark:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 14px;\n border: solid #fff;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.text {\n margin-left: 40px;\n display: inline-block;\n transition: all 0.2s ease-in-out;\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"1dbb93","snapshot":null,"tags":null,"title":"checkbox by sujeet-12","updated":"2024-01-22T17:02:34.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:02:34.000Z","isPrivate":0,"projectId":"d0c748","snapshot":null,"tags":null,"title":"checkbox by AKAspidey01","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":231,"cssLen":1157,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n

\n","css":".checkboxtoggler {\n width: 3em;\n display: flex;\n flex-direction: column;\n gap: 0.7em;\n cursor: pointer;\n}\n\n.line-1 {\n background: #df6447;\n height: 0.3em;\n border-radius: 10em;\n transition-duration: 500ms;\n}\n\n.line-2 {\n background: #df6447;\n height: 0.3em;\n border-radius: 10em;\n transition-duration: 500ms;\n}\n\n.line-3 {\n background: #df6447;\n height: 0.3em;\n border-radius: 10em;\n transition-duration: 500ms;\n}\n\n#toggleChecker {\n height: 3em;\n width: 100%;\n display: none;\n}\n\n#toggleChecker:checked + #togglerLable .checkboxtoggler .line-1 {\n -webkit-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);\n -ms-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);\n transform: rotate(45deg) translateY(0.7em) translateX(0.7em);\n}\n\n#toggleChecker:checked + #togglerLable .checkboxtoggler .line-2 {\n -webkit-transform: rotate(-45deg) translateY(0em) translateX(0.1em);\n -ms-transform: rotate(-45deg) translateY(0em) translateX(0.1em);\n transform: rotate(-45deg) translateY(0em) translateX(0.1em);\n}\n\n#toggleChecker:checked + #togglerLable .checkboxtoggler .line-3 {\n transform: scaleX(0);\n transform-origin: left;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"d9f328","snapshot":null,"tags":null,"title":"checkbox by milegelu","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2959,"cssLen":2648,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

ball

\n \n \n \n \n

Game

\n\n","css":".container {\n --UnChacked-color: hsl(0, 0%, 10%);\n --chacked-color: hsl(216, 100%, 60%);\n --font-color: white;\n --chacked-font-color: var(--font-color);\n --icon-size: 1.5em;\n --anim-time: 0.2s;\n --anim-scale: 0.1;\n --base-radius: 0.8em;\n}\n\n.container {\n display: flex;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n fill: var(--font-color);\n color: var(--font-color);\n}\n\n/* Hide the default checkbox */\n.container input {\n display: none;\n}\n\n/* Base custom checkbox */\n.checkmark {\n background: var(--UnChacked-color);\n border-radius: var(--base-radius);\n\n display: flex;\n padding: 0.5em;\n}\n.icon {\n width: var(--icon-size);\n height: auto;\n filter: drop-shadow(0px 2px var(--base-radius) rgba(0, 0, 0, 0.25));\n}\n.name {\n margin: 0 0.25em;\n}\n.Yes {\n width: 0;\n}\n.name.Yes {\n display: none;\n}\n\n/* action custom checkbox */\n.container:hover .checkmark,\n.container:hover .icon,\n.container:hover .name {\n transform: scale(calc(1 + var(--anim-scale)));\n}\n\n.container:active .checkmark,\n.container:active .icon,\n.container:active .name {\n transform: scale(calc(1 - var(--anim-scale) / 2));\n border-radius: calc(var(--base-radius) * 2);\n}\n.checkmark::before {\n content: \"\";\n opacity: 0.5;\n transform: scale(1);\n border-radius: var(--base-radius);\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n}\n.checkmark:hover:before {\n background-color: hsla(0, 0%, 50%, 0.2);\n}\n.container input:checked + .checkmark:before {\n animation: boon calc(var(--anim-time)) ease;\n animation-delay: calc(var(--anim-time) / 2);\n}\n\n/* When the checkbox is checked*/\n.container input:checked + .checkmark {\n --UnChacked-color: var(--chacked-color);\n fill: var(--chacked-font-color);\n color: var(--chacked-font-color);\n}\n\n.container input:checked ~ .checkmark .No {\n width: 0;\n}\n.container input:checked ~ .checkmark .name.No {\n display: none;\n}\n\n.container input:checked ~ .checkmark .Yes {\n width: var(--icon-size);\n}\n.container input:checked ~ .checkmark .name.Yes {\n width: auto;\n display: unset;\n}\n\n/*Animation*/\n.container,\n.checkmark,\n.checkmark:after,\n.icon,\n.checkmark .name {\n transition: all var(--anim-time);\n}\n\n/*Unuse*/\n@keyframes icon-rot {\n 50% {\n transform: rotateZ(180deg) scale(calc(1 - var(--anim-scale)));\n border-radius: 1em;\n }\n to {\n transform: rotate(360deg);\n border-radius: var(--base-radius);\n }\n}\n/*Unuse*/\n@keyframes boo {\n 80% {\n transform: scale(1.4);\n }\n 99% {\n transform: scale(1.7);\n border: 2px solid var(--UnChacked-color);\n }\n to {\n transform: scale(0);\n }\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"483e83","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":482,"cssLen":1534,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n border-radius: 50%;\n background-color: white;\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 transition: .3s;\n transform: scale(0);\n border-radius: 50%;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #20c580;\n transform: scale(1);\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.container input:checked ~ .celebrate {\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.30em;\n height: 0.5em;\n border: solid white;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(45deg);\n}\n\n.container .celebrate {\n position: absolute;\n transform-origin: center;\n animation: kfr-celebrate .4s;\n animation-fill-mode: forwards;\n display: none;\n stroke: #20c580;\n}\n\n@keyframes kfr-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n transform: scale(1.2);\n opacity: 0;\n display: none;\n }\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"80d57e","snapshot":null,"tags":null,"title":"checkbox by adamgiebl","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1184,"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}\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 background-color: #ccc;\n transition: all 0.3s;\n border-radius: 5px;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #47da99;\n animation: pop 0.5s;\n animation-direction: alternate;\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 pop {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.9);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"31059e","snapshot":null,"tags":null,"title":"checkbox by talhaabu1","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":223,"cssLen":997,"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":".checkbox-wrapper-23 *,\n .checkbox-wrapper-23 *:after,\n .checkbox-wrapper-23 *:before {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-23 input {\n position: absolute;\n opacity: 0;\n}\n\n.checkbox-wrapper-23 input:checked + label svg path {\n stroke-dashoffset: 0;\n}\n\n.checkbox-wrapper-23 input:focus + label {\n transform: scale(1.03);\n}\n\n.checkbox-wrapper-23 input + label {\n display: block;\n border: 2px solid rgb(253, 237, 237);\n width: var(--size);\n height: var(--size);\n border-radius: 6px;\n cursor: pointer;\n transition: all .2s ease;\n}\n\n.checkbox-wrapper-23 input + label:active {\n transform: scale(1.05);\n border-radius: 12px;\n}\n\n.checkbox-wrapper-23 input + label svg {\n pointer-events: none;\n padding: 5%;\n}\n\n.checkbox-wrapper-23 input + label svg path {\n fill: none;\n stroke: rgb(247, 247, 247);\n stroke-width: 4px;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 100;\n stroke-dashoffset: 101;\n transition: all 250ms cubic-bezier(1,0,.37,.91);\n}\n"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"9ac36f","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":755,"cssLen":899,"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 .check-regular {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .check-solid {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .check-regular {\n display: none;\n}\n\n.container input:checked ~ .check-solid {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\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) rotate(15deg);\n }\n}"},{"created":"2024-01-22T17:02:33.000Z","isPrivate":0,"projectId":"4feed2","snapshot":null,"tags":null,"title":"checkbox by adamgiebl","updated":"2024-01-22T17:02:33.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":173,"cssLen":1243,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n Checkbox\n \n \n","css":".checkbox {\n display: flex;\n align-items: center;\n margin: 10px;\n font-family: Arial, sans-serif;\n color: black;\n}\n\n.checkbox input {\n display: none;\n}\n\n.checkbox .checkmark {\n width: 28px;\n height: 28px;\n border-radius: 10px;\n background-color: #ffffff2b;\n box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset,\n #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox .checkmark::after {\n content: \"\";\n width: 18px;\n height: 18px;\n border-radius: 5px;\n background-color: #e3e3e3;\n box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: background-color 0.3s ease-in-out;\n}\n\n.checkbox input:checked + .checkmark {\n background-color: #22cc3f;\n box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 24px inset,\n rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;\n}\n\n.checkbox input:checked + .checkmark::after {\n background-color: white;\n}\n\n.checkbox .label {\n margin-right: 10px;\n user-select: none;\n font-weight: 700;\n cursor: pointer;\n}"}]}},"actionData":null,"errors":null}