Checkmark

{"loaderData":{"0":null,"0-3":{"total":7296,"projects":[{"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

\n \n \n \n \n \n \n Sketch\n \n \n

\n","css":".checkbox-wrapper-16 *,\n .checkbox-wrapper-16 *:after,\n .checkbox-wrapper-16 *:before {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper-16 .checkbox-input {\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n background-color: #2260ff;\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-icon,\n .checkbox-wrapper-16 .checkbox-input:checked + .checkbox-tile .checkbox-label {\n color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile {\n border-color: #2260ff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;\n}\n\n.checkbox-wrapper-16 .checkbox-input:focus + .checkbox-tile:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 7rem;\n min-height: 7rem;\n border-radius: 0.5rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n transition: 0.15s ease;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:before {\n content: \"\";\n position: absolute;\n display: block;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid #b5bfd9;\n background-color: #fff;\n border-radius: 50%;\n top: 0.25rem;\n left: 0.25rem;\n opacity: 0;\n transform: scale(0);\n transition: 0.25s ease;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E\");\n background-size: 12px;\n background-repeat: no-repeat;\n background-position: 50% 50%;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover {\n border-color: #2260ff;\n}\n\n.checkbox-wrapper-16 .checkbox-tile:hover:before {\n transform: scale(1);\n opacity: 1;\n}\n\n.checkbox-wrapper-16 .checkbox-icon {\n transition: 0.375s ease;\n color: #494949;\n}\n\n.checkbox-wrapper-16 .checkbox-icon svg {\n width: 3rem;\n height: 3rem;\n}\n\n.checkbox-wrapper-16 .checkbox-label {\n color: #707070;\n transition: 0.375s ease;\n text-align: center;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"193247","snapshot":null,"tags":null,"title":"checkbox by PriyanshuGupta28","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":157,"cssLen":2743,"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","css":".checkbox-wrapper * {\n -webkit-tap-highlight-color: transparent;\n outline: none;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox-wrapper label {\n --size: 50px;\n --shadow: calc(var(--size) * .07) calc(var(--size) * .1);\n position: relative;\n display: block;\n width: var(--size);\n height: var(--size);\n margin: 0 auto;\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n border-radius: 50%;\n box-shadow: 0 var(--shadow) #ffbeb8;\n cursor: pointer;\n transition: 0.2s ease transform, 0.2s ease background-color,\n 0.2s ease box-shadow;\n overflow: hidden;\n z-index: 1;\n}\n\n.checkbox-wrapper label:before {\n content: \"\";\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n width: calc(var(--size) * .7);\n height: calc(var(--size) * .7);\n margin: 0 auto;\n background-color: #fff;\n transform: translateY(-50%);\n border-radius: 50%;\n box-shadow: inset 0 var(--shadow) #ffbeb8;\n transition: 0.2s ease width, 0.2s ease height;\n}\n\n.checkbox-wrapper label:hover:before {\n width: calc(var(--size) * .55);\n height: calc(var(--size) * .55);\n box-shadow: inset 0 var(--shadow) #ff9d96;\n}\n\n.checkbox-wrapper label:active {\n transform: scale(0.9);\n}\n\n.checkbox-wrapper .tick_mark {\n position: absolute;\n top: -1px;\n right: 0;\n left: calc(var(--size) * -.05);\n width: calc(var(--size) * .6);\n height: calc(var(--size) * .6);\n margin: 0 auto;\n margin-left: calc(var(--size) * .14);\n transform: rotateZ(-40deg);\n}\n\n.checkbox-wrapper .tick_mark:before,\n .checkbox-wrapper .tick_mark:after {\n content: \"\";\n position: absolute;\n background-color: #fff;\n border-radius: 2px;\n opacity: 0;\n transition: 0.2s ease transform, 0.2s ease opacity;\n}\n\n.checkbox-wrapper .tick_mark:before {\n left: 0;\n bottom: 0;\n width: calc(var(--size) * .1);\n height: calc(var(--size) * .3);\n box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);\n transform: translateY(calc(var(--size) * -.68));\n}\n\n.checkbox-wrapper .tick_mark:after {\n left: 0;\n bottom: 0;\n width: 100%;\n height: calc(var(--size) * .1);\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);\n transform: translateX(calc(var(--size) * .78));\n}\n\n.checkbox-wrapper input[type=\"checkbox\"]:checked + label {\n background-color: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"]:checked + label:before {\n width: 0;\n height: 0;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"]:checked + label .tick_mark:before,\n .checkbox-wrapper input[type=\"checkbox\"]:checked + label .tick_mark:after {\n transform: translate(0);\n opacity: 1;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"44015b","snapshot":null,"tags":null,"title":"checkbox by nanda248","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":264,"cssLen":1343,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n ENGINE\n START\n STOP\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 checkmark=outer-circle */\n.circle {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 6em;\n height: 6em;\n border-radius: 50%;\n border: 6px solid #838996;\n background-color: #282828;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n}\n\n.circle span {\n color: #e5e4e2;\n font-size: small;\n}\n\n.circle .led {\n width: 1em;\n height: 0.2em;\n background-color: #BBBBBB;\n border-radius: 5px;\n transition: 0.4s;\n}\n\n.engine-text {\n margin-top: 0.75em;\n font-weight: 500;\n}\n\n.start-text, .stop-text {\n font-weight: 600;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .circle .led {\n background-color: #FDDA16;\n box-shadow: #FDDA16 0px 1px 0px, #FDDA16 0px 0px 8px;\n}\n\n.container input:checked ~ .circle {\n box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,\n rgba(14, 30, 37, 0.32) 0px 2px 16px 0px,\n inset 3px 3px 8px 1px #485871,\n inset -3px -3px 8px 1px #485871;\n}"},{"created":"2024-01-22T17:02:34.000Z","isPrivate":0,"projectId":"17d111","snapshot":null,"tags":null,"title":"checkbox by JkHuger","updated":"2024-01-22T17:02:34.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":94,"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":".checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}\n\n.checkbox input[type=\"checkbox\"] {\n opacity: 0;\n position: absolute;\n}\n\n.checkbox .checkmark {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n border: 1px solid #ccc;\n border-radius: 50%;\n transition: background-color 0.2s ease;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .checkmark {\n background-color: #0078d4;\n border-color: #0078d4;\n}\n\n.checkbox input[type=\"checkbox\"]:checked + .checkmark:after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #fff;\n transition: transform 0.2s ease;\n transform: scale(1);\n}\n\n.checkbox .checkmark:after {\n content: \"\";\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: transparent;\n transform: scale(0);\n transition: transform 0.2s ease;\n}\n"},{"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