Checkmark

{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"e12220","snapshot":null,"tags":null,"title":"checkbox by TechByElijah","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":1596,"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: inline-block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n width: 24px;\n height: 24px;\n}\n\n /* Create a custom checkbox */\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: #fff;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.3);\n transition: background-color 0.3s ease;\n z-index: 1;\n}\n\n.glass-effect {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n height: 14px;\n width: 14px;\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n transition: transform 0.3s ease;\n z-index: 2;\n}\n\n /* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: #2196F3;\n}\n\n /* Show the glass effect when checked */\n.container input:checked ~ .glass-effect {\n transform: translate(-50%, -50%) 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 /* Style the checkmark/indicator */\n.container .checkmark:after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -50%) rotate(45deg);\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"89c09c","snapshot":null,"tags":null,"title":"checkbox by EddyBel","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1675,"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.container::before {\n position: absolute;\n left: 0;\n top: 0;\n content: \"\";\n width: 100%;\n height: 100%;\n border-radius: 50%;\n filter: blur(5px);\n background-color: #b899ff;\n background-image: radial-gradient(at 6% 13%, hsla(322,81%,60%,1) 0px, transparent 50%),\nradial-gradient(at 9% 59%, hsla(209,65%,71%,1) 0px, transparent 50%),\nradial-gradient(at 39% 16%, hsla(325,93%,79%,1) 0px, transparent 50%);\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 2em;\n width: 2em;\n border-radius: 50%;\n background-color: rgb(255, 255, 255);\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n height: 2em;\n width: 2em;\n border-radius: 50%;\n position: relative;\n}\n\n.container input:checked ~ .checkmark::before {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n width: 65%;\n height: 65%;\n content: \"\";\n border-radius: 50%;\n background-color: #ff99f0;\n background-image: radial-gradient(at 86% 29%, hsla(277,65%,76%,1) 0px, transparent 50%),\n radial-gradient(at 13% 20%, hsla(54,73%,71%,1) 0px, transparent 50%),\n radial-gradient(at 76% 0%, hsla(145,64%,69%,1) 0px, transparent 50%);\n animation: animation__checked 600ms normal;\n}\n\n@keyframes animation__checked {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n\n 100% {\n opacity: 100;\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"affd61","snapshot":null,"tags":null,"title":"checkbox by ercnersoy","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1367,"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.4em;\n width: 1.4em;\n border: 2px solid #2196F3;\n border-radius: 1rem 0rem 1rem;\n transform: rotate(45deg);\n transition: all .5s ease-in-out;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n box-shadow: 0px 0px 40px 5px #2196F3;\n border-radius: 1rem 0rem 1rem;\n background-color: #2195f31f;\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.35em;\n top: 0.20em;\n width: 0.25em;\n height: 0.5em;\n border: solid #2196F3;\n border-width: 0 0.15em 0.15em 0;\n transform: rotate(-5deg);\n animation: upAnimate 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n@keyframes upAnimate {\n from {\n transform: translate(-20px, -20px) rotate(-5deg);\n opacity: 0;\n }\n\n to {\n transform: translate(0, 0) rotate(-5deg);\n opacity: 1;\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"67f615","snapshot":null,"tags":null,"title":"checkbox by ahmed150up","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":210,"cssLen":379,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n \n\n","css":"input[type=\"checkbox\"] {\n display: none;\n}\n\nlabel svg {\n width: 44px;\n height: 44px;\n fill: none;\n stroke: #000;\n stroke-width: 2px;\n}\n\ninput[type=\"checkbox\"]:checked + label svg {\n fill: #FFC107;\n animation: pop_42 0.5s ease-out;\n}\n\n@keyframes pop_42 {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(1.5);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"4279bb","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1628,"cssLen":1399,"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

","css":".heart-container {\n --heart-color: rgb(91, 255, 195);\n position: relative;\n width: 50px;\n height: 50px;\n transition: .3s;\n}\n\n.heart-container .checkbox {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 20;\n cursor: pointer;\n}\n\n.heart-container .svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.heart-container .svg-outline,\n .heart-container .svg-filled {\n fill: var(--heart-color);\n position: absolute;\n}\n\n.heart-container .svg-filled {\n animation: keyframes-svg-filled 1s;\n display: none;\n}\n\n.heart-container .svg-celebrate {\n position: absolute;\n animation: keyframes-svg-celebrate .5s;\n animation-fill-mode: forwards;\n display: none;\n stroke: var(--heart-color);\n fill: var(--heart-color);\n stroke-width: 2px;\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-filled {\n display: block\n}\n\n.heart-container .checkbox:checked~.svg-container .svg-celebrate {\n display: block\n}\n\n@keyframes keyframes-svg-filled {\n 0% {\n transform: scale(0);\n }\n\n 25% {\n transform: scale(1.2);\n }\n\n 50% {\n transform: scale(1);\n filter: brightness(1.5);\n }\n}\n\n@keyframes keyframes-svg-celebrate {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n opacity: 1;\n filter: brightness(1.5);\n }\n\n 100% {\n transform: scale(1.4);\n opacity: 0;\n display: none;\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"05a763","snapshot":null,"tags":null,"title":"checkbox by aadium","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":831,"cssLen":1007,"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

","css":".container {\n width: 120px;\n height: 120px;\n position: relative;\n border-radius: 50%;\n}\n\n.play-btn {\n position: absolute;\n appearance: none;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: conic-gradient(#ff6347, #ff6347);\n cursor: pointer;\n outline: none;\n}\n\n.play-btn::before {\n content: \"\";\n position: absolute;\n width: 93%;\n height: 93%;\n background-color: #000;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.play-btn:checked {\n animation: borderAnimate 700ms ease-in-out 1;\n animation-fill-mode: forwards;\n}\n\n@keyframes borderAnimate {\n 0% {\n transform: rotate(0);\n background: conic-gradient(#ff6347, transparent 20%);\n }\n\n 80% {\n background: conic-gradient(#ff6347, transparent 90%);\n }\n\n 100% {\n transform: rotate(360deg);\n background: conic-gradient(#ff6347, #ff6347);\n }\n}\n\n.play-icon {\n position: absolute;\n width: 40px;\n height: 40px;\n left: 60%;\n top: 50%;\n background-color: #ff6347;\n transform: translate(-60%, -50%) rotate(90deg);\n clip-path: polygon(50% 15%, 0% 100%, 100% 100%);\n transition: all 400ms ease-in-out;\n cursor: pointer;\n}\n\n.play-btn:checked + .play-icon {\n clip-path: polygon(0 100%, 0% 100%, 100% 100%);\n}\n\n.pause-icon {\n position: absolute;\n width: 40px;\n height: 40px;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n}\n\n.pause-icon::before {\n content: \"\";\n position: absolute;\n width: 0%;\n height: 100%;\n background-color: #ff6347;\n left: 0;\n}\n\n.pause-icon::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 100%;\n background-color: #ff6347;\n right: 0;\n}\n\n.play-btn:checked ~ .pause-icon::before {\n animation: reveal 300ms ease-in-out 350ms 1;\n animation-fill-mode: forwards;\n}\n\n.play-btn:checked ~ .pause-icon::after {\n animation: reveal 300ms ease-in-out 600ms 1;\n animation-fill-mode: forwards;\n}\n\n@keyframes reveal {\n 0% {\n width: 0;\n }\n\n 100% {\n width: 35%;\n }\n}"},{"created":"2024-01-22T17:03:56.000Z","isPrivate":0,"projectId":"46ed61","snapshot":null,"tags":null,"title":"checkbox by Javierrocadev","updated":"2024-01-22T17:03:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":835,"cssLen":3662,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n\n","css":".relative{position:relative}.left-2{left:0.5rem}.top-2{top:0.5rem}.z-20{z-index:20}.flex{display:flex}.hidden{display:none}.h-12{height:3rem}.h-8{height:2rem}.w-12{width:3rem}.w-8{width:2rem}.scale-0{--tw-scale-x:0;--tw-scale-y:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-emerald-800{--tw-gradient-from:#065f46 var(--tw-gradient-from-position);--tw-gradient-to:rgb(6 95 70 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-emerald-700{--tw-gradient-to:rgb(4 120 87 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #047857 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-emerald-500{--tw-gradient-to:#10b981 var(--tw-gradient-to-position)}.opacity-0{opacity:0}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.before\\:absolute::before{content:var(--tw-content);position:absolute}.before\\:right-0::before{content:var(--tw-content);right:0px}.before\\:h-8::before{content:var(--tw-content);height:2rem}.before\\:w-8::before{content:var(--tw-content);width:2rem}.before\\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\\:bg-violet-500::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(139 92 246 / var(--tw-bg-opacity))}.before\\:blur-sm::before{content:var(--tw-content);--tw-blur:blur(4px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:bottom-1::after{content:var(--tw-content);bottom:0.25rem}.after\\:left-1::after{content:var(--tw-content);left:0.25rem}.after\\:z-10::after{content:var(--tw-content);z-index:10}.after\\:h-4::after{content:var(--tw-content);height:1rem}.after\\:w-4::after{content:var(--tw-content);width:1rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-rose-300::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(253 164 175 / var(--tw-bg-opacity))}.after\\:blur-sm::after{content:var(--tw-content);--tw-blur:blur(4px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.peer:checked ~ .peer-checked\\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked ~ .peer-checked\\:bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\\:opacity-100{opacity:1}.peer:checked ~ .peer-checked\\:transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.peer:checked ~ .peer-checked\\:duration-300{transition-duration:300ms}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"1d0040","snapshot":null,"tags":null,"title":"checkbox by krlozCJ","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":411,"cssLen":1064,"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":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n display: none;\n color: white;\n}\n\n.container {\n --size: 50px;\n width: var(--size);\n display: block;\n height: var(--size);\n background-color: #191A1E;\n border-radius: 100%;\n cursor: pointer;\n padding: 5px;\n color: white;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n}\n\n.container .checkmark {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;\n transition: all ease 0.3s;\n padding: 8px;\n}\n\n.container .checkmark svg {\n opacity: 0;\n transition: all ease 0.3s;\n}\n\n.container input:checked + .checkmark {\n box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;\n}\n\n.container input:checked + .checkmark svg {\n opacity: 1;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"52008e","snapshot":null,"tags":null,"title":"checkbox by Galahhad","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":2980,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"/* checkbox settings 👇 */\n\n.ui-checkbox {\n --primary-color: #1677ff;\n --secondary-color: #fff;\n --primary-hover-color: #4096ff;\n /* checkbox */\n --checkbox-diameter: 20px;\n --checkbox-border-radius: 5px;\n --checkbox-border-color: #d9d9d9;\n --checkbox-border-width: 1px;\n --checkbox-border-style: solid;\n /* checkmark */\n --checkmark-size: 1.2;\n}\n\n.ui-checkbox, \n.ui-checkbox *, \n.ui-checkbox *::before, \n.ui-checkbox *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.ui-checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: var(--checkbox-diameter);\n height: var(--checkbox-diameter);\n border-radius: var(--checkbox-border-radius);\n background: var(--secondary-color);\n border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);\n -webkit-transition: all 0.3s;\n -o-transition: all 0.3s;\n transition: all 0.3s;\n cursor: pointer;\n position: relative;\n}\n\n.ui-checkbox::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);\n box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);\n border-radius: inherit;\n opacity: 0;\n -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.ui-checkbox::before {\n top: 40%;\n left: 50%;\n content: \"\";\n position: absolute;\n width: 4px;\n height: 7px;\n border-right: 2px solid var(--secondary-color);\n border-bottom: 2px solid var(--secondary-color);\n -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);\n -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);\n transform: translate(-50%, -50%) rotate(45deg) scale(0);\n opacity: 0;\n -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;\n -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;\n transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;\n}\n\n/* actions */\n\n.ui-checkbox:hover {\n border-color: var(--primary-color);\n}\n\n.ui-checkbox:checked {\n background: var(--primary-color);\n border-color: transparent;\n}\n\n.ui-checkbox:checked::before {\n opacity: 1;\n -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));\n -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));\n transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));\n -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;\n}\n\n.ui-checkbox:active:not(:checked)::after {\n -webkit-transition: none;\n -o-transition: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n transition: none;\n opacity: 1;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"2f05e9","snapshot":null,"tags":null,"title":"checkbox by bociKond","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1356,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n