{"loaderData":{"0":null,"0-3":{"total":7517,"projects":[{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"3a7f63","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":264,"cssLen":2129,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Click\n Me\n to\n And so on ..\n

\n","css":".container {\n --s: 1em; /* control the size */\n --g: 10px; /* the gap */\n --c: #009688; /* the active color */\n\n display: grid;\n grid-auto-rows: 1fr;\n gap: var(--g);\n position: relative;\n}\n.container:before {\n content: \"\";\n position: absolute;\n height: calc(var(--s) / 2);\n left: calc(var(--s) / 4 + var(--_x, 0px));\n top: calc(var(--s) / 4);\n background: var(--c);\n border-radius: 50%;\n aspect-ratio: 1;\n transition: 0.4s, left cubic-bezier(0.1, -2000, 0.7, -2000) 0.4s;\n}\n.container label {\n display: inline-flex;\n line-height: var(--s);\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n.container input {\n height: var(--s);\n aspect-ratio: 1;\n border: calc(var(--s) / 8) solid var(--_c, #939393);\n border-radius: 50%;\n outline-offset: calc(var(--s) / 10);\n padding: calc(var(--s) / 8);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n font-size: inherit;\n margin: 0;\n transition: 0.3s;\n}\n.container input:checked {\n --_c: var(--c);\n}\n.container:not(:has(input:checked)):before {\n --_i: -1;\n opacity: 0;\n}\n.container:has(input:checked):before {\n opacity: 1;\n transform: translateY(calc(var(--_i) * (var(--s) + var(--g))));\n}\n.container:has(label:nth-child(1) input:checked):before {\n --_i: 0;\n --_x: 0.02px;\n}\n.container:has(label:nth-child(2) input:checked):before {\n --_i: 1;\n --_x: 0.04px;\n}\n.container:has(label:nth-child(3) input:checked):before {\n --_i: 2;\n --_x: 0.06px;\n}\n.container:has(label:nth-child(4) input:checked):before {\n --_i: 3;\n --_x: 0.08px;\n}\n.container:has(label:nth-child(5) input:checked):before {\n --_i: 4;\n --_x: 0.1px;\n}\n/* and so on ..*/\n\n.container input:disabled {\n background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;\n opacity: 0.5;\n cursor: not-allowed;\n}\n@media print {\n input[type=\"radio\"] {\n -webkit-appearance: auto;\n -moz-appearance: auto;\n appearance: auto;\n background: none;\n }\n}\n@supports not selector(:has(*)) {\n .container:before {\n display: none;\n }\n .container input:checked {\n --_c: var(--c);\n background: var(--c) content-box;\n }\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"8db17c","snapshot":null,"tags":null,"title":"radio by Yaya12085","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":519,"cssLen":1403,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n 1\n \n \n \n 2\n \n \n \n 3\n \n \n \n 4\n \n \n

","css":".radio-input input {\n display: none;\n}\n\n.radio-input {\n --container_width: 300px;\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 9999px;\n background-color: #fff;\n color: #000000;\n width: var(--container_width);\n overflow: hidden;\n border: 1px solid rgba(53, 52, 52, 0.226);\n}\n\n.radio-input label {\n width: 100%;\n padding: 10px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n font-weight: 600;\n letter-spacing: -1px;\n font-size: 14px;\n}\n\n.selection {\n display: none;\n position: absolute;\n height: 100%;\n width: calc(var(--container_width) / 4);\n z-index: 0;\n left: 0;\n top: 0;\n transition: .15s ease;\n}\n\n.radio-input label:has(input:checked) {\n color: #fff;\n}\n\n.radio-input label:has(input:checked) ~ .selection {\n background-color: rgb(11 117 223);\n display: inline-block;\n}\n\n.radio-input label:nth-child(1):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 0/4));\n}\n\n.radio-input label:nth-child(2):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 1/4));\n}\n\n.radio-input label:nth-child(3):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 2/4));\n}\n\n.radio-input label:nth-child(4):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 3/4));\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"e5b71a","snapshot":null,"tags":null,"title":"radio by BiliBC034","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":544,"cssLen":638,"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 \n

\n","css":".rating:not(:checked) > input {\n position: absolute;\n appearance: none;\n}\n\n.rating:not(:checked) > label {\n float: right;\n cursor: pointer;\n font-size: 30px;\n color: #666;\n}\n\n.rating:not(:checked) > label:before {\n content: \"★\";\n}\n\n.rating > input:checked + label:hover,\n.rating > input:checked + label:hover ~ label,\n.rating > input:checked ~ label:hover,\n.rating > input:checked ~ label:hover ~ label,\n.rating > label:hover ~ input:checked ~ label {\n color: #e58e09;\n}\n\n.rating:not(:checked) > label:hover,\n.rating:not(:checked) > label:hover ~ label {\n color: #ff9e0b;\n}\n\n.rating > input:checked ~ label {\n color: #ffa723;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"d29b96","snapshot":null,"tags":null,"title":"radio by MijailVillegas","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":563,"cssLen":3255,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".container {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-style: italic;\n font-weight: bold;\n font-size: 1.2em;\n display: grid;\n gap: 2em;\n place-content: center;\n width: 400px;\n}\n\n.container input[type=radio] {\n display: none;\n}\n\n.input-btn:is(:checked) + .neon-btn .span {\n inset: 2px;\n background-color: #4090b5;\n background: repeating-linear-gradient(to bottom, transparent 0%, #4090b5 1px, #4090b5 3px, #4090b5 5px, #4090b5 4px, transparent 0.5%), repeating-linear-gradient(to left, hsl(295, 60%, 12%) 100%, hsl(295, 60%, 12%) 100%);\n box-shadow: inset 0 40px 20px hsl(296, 59%, 10%);\n}\n\n.input-btn:is(:checked) + .neon-btn .txt {\n text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);\n color: rgb(255, 255, 255);\n animation: colorchange 0.3s ease;\n}\n\n.input-btn:is(:checked) + .neon-btn::before {\n animation-duration: 0.6s;\n}\n\n.input-btn:is(:checked) + .neon-btn::after {\n animation-duration: 0.6s;\n}\n\n.neon-btn {\n width: 300px;\n height: 60px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0.5em 5em;\n text-align: right;\n background: transparent;\n position: relative;\n overflow: hidden;\n transition: all 2s ease-in-out;\n -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n}\n\n.neon-btn .span {\n display: flex;\n -webkit-clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 86%, 90% 89%, 88% 100%, 5% 100%, 0% 85%);\n position: absolute;\n inset: 1px;\n background-color: #212121;\n z-index: 1;\n}\n\n.neon-btn .txt {\n text-align: right;\n position: relative;\n z-index: 2;\n color: aliceblue;\n font-size: 1em;\n transition: all ease-in-out 2s linear;\n text-shadow: 0px 0px 1px #4090b5, 0px 0px 1px #9e30a9, 0 0 1px white;\n}\n\n.neon-btn::before {\n content: \"\";\n position: absolute;\n height: 300px;\n aspect-ratio: 1.5/1;\n box-shadow: -17px -19px 20px #9e30a9;\n background-image: conic-gradient(#9e30a9, transparent, transparent, transparent, transparent, transparent, transparent, #9e30a9);\n animation: rotate 4s linear infinite -2s;\n}\n\n.neon-btn::after {\n content: \"\";\n position: absolute;\n height: 300px;\n aspect-ratio: 1.5/1;\n box-shadow: -17px -19px 10px #4090b5;\n background-image: conic-gradient(#4090b5, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #4090b5);\n animation: rotate 4s linear infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes colorchange {\n 0% {\n text-shadow: 0px 0px 0px #9e30a9, 0px 0px 0px #4090b5, 0 0 0px rgba(255, 255, 255, 0.616);\n }\n\n 50% {\n text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);\n }\n\n to {\n text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5, 0 0 20px rgba(255, 255, 255, 0.616);\n }\n}\n\n@keyframes backgroundchange {\n 0% {\n background-color: transparent;\n }\n\n 50% {\n background-color: #4090b5;\n }\n\n to {\n background-color: transparent;\n }\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"fb9e7e","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":809,"cssLen":2342,"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":".cont input[type=\"radio\"] {\n display: none;\n}\n\n.cont {\n width: 140px;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.cont label:before {\n cursor: pointer;\n content: '';\n display: block;\n height: 20px;\n width: 20px;\n border: 2px solid #111;\n border-radius: 50%;\n float: left;\n margin: 0 10px;\n}\n\n.cont .slider > .dot {\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: relative;\n top: 5px;\n left: 15px;\n opacity: 0;\n background-color: #111;\n transition: all 0.3s;\n}\n\n.cont input[type=\"radio\"]:checked ~ .slider > .dot {\n opacity: 1;\n}\n\n.cont .line1 {\n height: 65px;\n width: 2px;\n background-color: #111;\n position: absolute;\n transform-origin: bottom;\n transform: translateX(65px) translateY(20px);\n transition: all 0.3s;\n}\n\n.cont .line2 {\n position: absolute;\n height: 150px;\n width: 2px;\n background-color: #111;\n transform: translateX(65px) translateY(80px);\n}\n\n.cont .dot2 {\n position: absolute;\n height: 6.66667px;\n width: 6.66667px;\n background-color: #111;\n border-radius: 50%;\n transform: translateX(62.66667px) translateY(76.66667px);\n}\n\n.cont #r1:checked ~ .slider > .dot, .cont #r4:checked ~ .slider > .dot {\n transform: translateX(2px) translateY(2px);\n}\n\n.cont #r1:checked ~ .slider > .line1, .cont #r4:checked ~ .slider > .line1 {\n transform: translateX(63px) translateY(13px) rotate(-32deg) scaleY(1.2)\n}\n\n.cont #r2:checked ~ .slider > .dot, .cont #r5:checked ~ .slider > .dot {\n transform: translateX(46px) translateY(2px);\n}\n\n.cont #r2:checked ~ .slider > .line1, .cont #r5:checked ~ .slider > .line1 {\n transform: translateX(65px) translateY(15px);\n}\n\n.cont #r3:checked ~ .slider > .dot, .cont #r6:checked ~ .slider > .dot {\n transform: translateX(90px) translateY(2px);\n}\n\n.cont #r3:checked ~ .slider > .line1, .cont #r6:checked ~ .slider > .line1 {\n transform: translateX(66px) translateY(16px) rotate(32deg) scaleY(1.3)\n}\n\n.cont:nth-of-type(2) {\n transform: translateX(-50%) scaleY(-1) translateY(37px);\n}\n\n.zapp, .zapp:after, .zapp:before {\n content: '';\n position: absolute;\n height: 40px;\n width: 4px;\n margin-left: -2px;\n background-color: #f00;\n}\n\n.zapp {\n transform: translateY(-40px);\n}\n\n.zapp:after {\n transform: translateX(42px);\n}\n\n.zapp:before {\n transform: translateX(-38px);\n}\n\n#c1:checked ~ #c4:checked ~ .zapp {\n display: none;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"3cc964","snapshot":null,"tags":null,"title":"radio by ozgeozkaraa01","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":666,"cssLen":1092,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n Option 1\n \n \n \n

\n Option 2\n \n \n \n

\n Option 3\n \n

\n\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #f2f2f2;\n}\n\n.custom-radio {\n display: flex;\n flex-direction: column;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.custom-radio input[type=\"radio\"] {\n display: none;\n}\n\n.radio-label {\n display: flex;\n align-items: center;\n padding: 10px 20px;\n cursor: pointer;\n transition: background-color 0.3s ease-in-out;\n}\n\n.radio-circle {\n width: 20px;\n height: 20px;\n border: 2px solid #ffcc00;\n border-radius: 50%;\n margin-right: 10px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;\n}\n\n.radio-text {\n font-size: 1rem;\n color: #333;\n transition: color 0.3s ease-in-out;\n}\n\n.custom-radio input[type=\"radio\"]:checked + .radio-label {\n background-color: #ffcc00;\n}\n\n.custom-radio input[type=\"radio\"]:checked + .radio-label .radio-circle {\n border-color: #fff;\n background-color: #ffcc00;\n}\n\n.custom-radio input[type=\"radio\"]:checked + .radio-label .radio-text {\n color: #64748b;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"449571","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":618,"cssLen":4269,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".form {\n display: flex;\n}\n\n.input {\n color: var(--fg);\n font: 1em/1.5 Helvetica, sans-serif;\n}\n\n.form, .label {\n width: 100%;\n}\n\n.form {\n margin: auto;\n max-width: 24em;\n padding: 0 1.5em;\n}\n\n.label {\n display: block;\n text-align: center;\n color: rgb(132, 248, 0);\n -webkit-tap-highlight-color: transparent;\n}\n\n.label:first-child .input {\n border-radius: 0.5em 0 0 0.5em;\n box-shadow: 0.1em 0 0 #2726267f inset,\n\t\t-0.1em 0 0 #27262600 inset,\n\t\t0 0.1em 0 #afa490 inset,\n\t\t0 -0.1em 0 #ffffff3f,\n\t\t0 0.2em 0.5em #0000007f,\n\t\t0 -0.1em 0 #926086 inset,\n\t\t-0.1em -0.2em 0 #ffffff7f inset,\n\t\t0.2em 0 0 #ffffff7f inset;\n}\n\n.label:last-child .input {\n border-radius: 0 0.5em 0.5em 0;\n box-shadow: 0 -0.1em 0 #926086 inset,\n\t\t0.1em 0 0 #2726267f inset,\n\t\t-0.1em 0 0 #2726267f inset,\n\t\t0 0.1em 0 #afa490 inset,\n\t\t-0.1em 0 0 #afa490 inset,\n\t\t0 -0.1em 0 #ffffff3f,\n\t\t0 0.2em 0.5em #0000007f,\n\t\t-0.1em -0.1em 0 0.1em #ffffff7f inset;\n}\n\n.label:first-child .input:checked {\n box-shadow: 0.1em 0 0 #272626af inset,\n\t\t-0.1em 0 0 #272626 inset,\n\t\t0 0.1em 0 #847a62 inset,\n\t\t0 -0.1em 0 #ffffff3f,\n\t\t0 0.1em 0 #ffffff7f,\n\t\t0 -0.1em 0 #722257 inset,\n\t\t-0.1em -0.2em 0 #ffffff7f inset,\n\t\t0.2em 0 0 #ffffff7f inset;\n}\n\n.label:last-child .input:checked {\n box-shadow: 0.1em 0 0 #272626af inset,\n\t\t-0.1em 0 0 #272626 inset,\n\t\t0 -0.1em 0 #722257 inset,\n\t\t0 0.1em 0 #847a62 inset,\n\t\t-0.1em 0 0 #847a62 inset,\n\t\t0 -0.1em 0 #ffffff3f,\n\t\t0 0.1em 0 #ffffff7f,\n\t\t-0.1em -0.1em 0 0.1em #ffffff7f inset;\n}\n\n.input {\n background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);\n border-radius: 0;\n box-shadow: 0.1em 0 0 #2726267f inset,\n\t\t-0.1em 0 0 #27262600 inset,\n\t\t0 0.1em 0 #afa490 inset,\n\t\t0 -0.1em 0 #ffffff3f,\n\t\t0 0.2em 0.5em #0000007f,\n\t\t0 -0.1em 0 #926086 inset,\n\t\t-0.1em -0.2em 0 #ffffff7f inset;\n cursor: pointer;\n display: block;\n margin-bottom: 0.5em;\n width: 100%;\n height: 1em;\n transition: box-shadow var(--transDur) ease-in-out;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.input:checked {\n background-image: linear-gradient(#ffffff 33%,#414751 58%,#827a7b,#c0b6ac,#c3adaa);\n box-shadow: 0.1em 0 0 #272626af inset,\n\t\t-0.1em 0 0 #272626 inset,\n\t\t0 0.1em 0 #847a62 inset,\n\t\t0 -0.1em 0 #ffffff3f,\n\t\t0 0.1em 0 #ffffff7f,\n\t\t0 -0.1em 0 #722257 inset,\n\t\t-0.1em -0.2em 0 #ffffff7f inset;\n}\n\n.input:checked + .span {\n opacity: 1;\n color: red\n}\n\n.input:focus {\n outline: transparent;\n}\n\n.input + .span {\n opacity: 0.65;\n transition: opacity var(--transDur) ease-in-out;\n}\n\n/* Dark mode */\n@media (prefers-color-scheme: dark) {\n :root {\n --bg: #5c6270;\n --fg: #e3e4e8;\n }\n\n .label:first-child .input {\n box-shadow: 0.1em 0 0 #2726267f inset,\n\t\t\t-0.1em 0 0 #27262600 inset,\n\t\t\t0 0.1em 0 #afa490 inset,\n\t\t\t0 -0.1em 0 #0000001f,\n\t\t\t0 0.2em 0.5em #0000007f,\n\t\t\t0 -0.1em 0 #926086 inset,\n\t\t\t-0.1em -0.2em 0 #ffffff7f inset,\n\t\t\t0.2em 0 0 #ffffff7f inset;\n }\n\n .label:last-child .input {\n box-shadow: 0 -0.1em 0 #926086 inset,\n\t\t\t0.1em 0 0 #2726267f inset,\n\t\t\t-0.1em 0 0 #2726267f inset,\n\t\t\t0 0.1em 0 #afa490 inset,\n\t\t\t-0.1em 0 0 #afa490 inset,\n\t\t\t0 -0.1em 0 #0000001f,\n\t\t\t0 0.2em 0.5em #0000007f,\n\t\t\t-0.1em -0.1em 0 0.1em #ffffff7f inset;\n }\n\n .label:first-child .input:checked {\n box-shadow: 0.1em 0 0 #272626af inset,\n\t\t\t-0.1em 0 0 #272626 inset,\n\t\t\t0 0.1em 0 #847a62 inset,\n\t\t\t0 -0.1em 0 #0000007f,\n\t\t\t0 0.1em 0 #0000007f,\n\t\t\t0 -0.1em 0 #722257 inset,\n\t\t\t-0.1em -0.2em 0 #ffffff7f inset,\n\t\t\t0.2em 0 0 #ffffff7f inset\n }\n\n .label:last-child .input:checked {\n box-shadow: 0.1em 0 0 #272626af inset,\n\t\t\t-0.1em 0 0 #272626 inset,\n\t\t\t0 -0.1em 0 #722257 inset,\n\t\t\t0 0.1em 0 #847a62 inset,\n\t\t\t-0.1em 0 0 #847a62 inset,\n\t\t\t0 -0.1em 0 #0000001f,\n\t\t\t0 0.1em 0 #0000007f,\n\t\t\t-0.1em -0.1em 0 0.1em #ffffff7f inset;\n }\n\n .input {\n box-shadow: 0.1em 0 0 #2726267f inset,\n\t\t\t-0.1em 0 0 #27262600 inset,\n\t\t\t0 0.1em 0 #afa490 inset,\n\t\t\t0 -0.1em 0 #0000001f,\n\t\t\t0 0.2em 0.5em #0000007f,\n\t\t\t0 -0.1em 0 #926086 inset,\n\t\t\t-0.1em -0.2em 0 #ffffff7f inset;\n }\n\n .input:checked {\n box-shadow: 0.1em 0 0 #272626af inset,\n\t\t\t-0.1em 0 0 #272626af inset,\n\t\t\t0 0.1em 0 #847a62 inset,\n\t\t\t0 -0.1em 0 #0000007f,\n\t\t\t0 0.1em 0 #0000007f,\n\t\t\t0 -0.1em 0 #722257 inset,\n\t\t\t-0.1em -0.2em 0 #ffffff7f inset;\n }\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"9dd0e2","snapshot":null,"tags":null,"title":"radio by Pradeepsaranbishnoi","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":300,"cssLen":976,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n

","css":".container form {\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n}\n\n.container label {\n display: flex;\n cursor: pointer;\n font-weight: 500;\n position: relative;\n overflow: hidden;\n margin-bottom: 0.375em;\n}\n\n.container label input {\n position: absolute;\n left: -9999px;\n}\n\n.container label input:checked + span {\n background-color: #414181;\n color: white;\n}\n\n.container label input:checked + span:before {\n box-shadow: inset 0 0 0 0.4375em #00005c;\n}\n\n.container label span {\n display: flex;\n align-items: center;\n padding: 0.375em 0.75em 0.375em 0.375em;\n border-radius: 99em;\n transition: 0.25s ease;\n color: #414181;\n}\n\n.container label span:hover {\n background-color: #d6d6e5;\n}\n\n.container label span:before {\n display: flex;\n flex-shrink: 0;\n content: \"\";\n background-color: #fff;\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n margin-right: 0.375em;\n transition: 0.25s ease;\n box-shadow: inset 0 0 0 0.125em #00005c;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"9321b6","snapshot":null,"tags":null,"title":"radio by Praashoo7","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":558,"cssLen":4096,"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":"/*Design Inspired by @ykadosh on Codepen*/\n\n.back {\n position: absolute;\n width: 16.6em;\n height: 6.5em;\n margin-top: -0.8em;\n margin-left: -0.77em;\n border-radius: 70px;\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;\n background-color: #171717;\n z-index: -1;\n}\n\n.main {\n display: flex;\n}\n\n.switch {\n display: block;\n position: relative;\n background-color: black;\n width: 70px;\n height: 70px;\n box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;\n border-radius: 50%;\n padding: 20px;\n margin: 5px;\n}\n\n.switch input {\n display: none;\n}\n\n.switch input:checked + .button .light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n.switch input:checked + .button .shine {\n opacity: 1;\n}\n\n.switch input:checked + .button .shadow {\n opacity: 0;\n}\n\n.switch .button {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n background-color: #9b0621;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n left: -0.75em;\n top: -0.75em;\n cursor: pointer;\n}\n\n.switch .light {\n opacity: 0;\n animation: light-off 1s;\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);\n}\n\n.switch .dots {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);\n background-size: 10px 10px;\n border-radius: 50%;\n}\n\n@keyframes flicker {\n 0% {\n opacity: 1;\n }\n\n 80% {\n opacity: 0.8;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes light-off {\n 0% {\n opacity: 1;\n }\n\n 80% {\n opacity: 0;\n }\n}\n\n.switch1 {\n display: block;\n position: relative;\n background-color: black;\n width: 70px;\n height: 70px;\n box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;\n border-radius: 50%;\n padding: 20px;\n margin: 5px;\n}\n\n.switch1 input {\n display: none;\n}\n\n.switch1 input:checked + .button .light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n.switch1 input:checked + .button .shine {\n opacity: 1;\n}\n\n.switch1 input:checked + .button .shadow {\n opacity: 0;\n}\n\n.switch1 .button {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n background-color: #949207;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n left: -0.75em;\n top: -0.785em;\n cursor: pointer;\n}\n\n.switch1 .light {\n opacity: 0;\n animation: light-off 1s;\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%);\n}\n\n.switch1 .dots {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%);\n background-size: 10px 10px;\n border-radius: 50%;\n}\n\n.switch2 {\n display: block;\n position: relative;\n background-color: black;\n width: 70px;\n height: 70px;\n box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black;\n border-radius: 50%;\n padding: 20px;\n margin: 5px;\n}\n\n.switch2 input {\n display: none;\n}\n\n.switch2 input:checked + .button .light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n.switch2 input:checked + .button .shine {\n opacity: 1;\n}\n\n.switch2 input:checked + .button .shadow {\n opacity: 0;\n}\n\n.switch2 .button {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n background-color: #2f9407;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n left: -0.75em;\n top: -0.79em;\n cursor: pointer;\n}\n\n.switch2 .light {\n opacity: 0;\n animation: light-off 1s;\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%);\n}\n\n.switch2 .dots {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(transparent 30%, rgba(0, 101, 13, 0.7) 70%);\n background-size: 10px 10px;\n border-radius: 50%;\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"3201b0","snapshot":null,"tags":null,"title":"radio by FH638","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7046,"cssLen":1094,"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":".input {\n display: flex;\n flex-direction: column;\n width: 200px;\n background-color: #0d1117;\n justify-content: center;\n border-radius: 10px;\n transition: 1s;\n padding: 10px;\n overflow: hidden;\n}\n\n.value {\n font-size: 15px;\n background-color: transparent;\n border: none;\n padding: 10px;\n color: white;\n display: flex;\n position: relative;\n gap: 5px;\n cursor: pointer;\n border-radius: 10px;\n transition: 1s;\n box-sizing: border-box;\n}\n\n.value:not(:active):hover,\n.value:focus {\n display: flex;\n box-sizing: border-box;\n border: 2px solid #1a1f24;\n color: #637185;\n}\n\n.value:focus,\n.value:active {\n background-color: #1a1f24;\n outline: none;\n margin-left: 17px;\n}\n\n.value::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -15px;\n width: 5px;\n height: 80%;\n background-color: #2f81f7;\n border-radius: 5px;\n opacity: 0;\n transition: 1s;\n}\n\n.value:focus::before,\n.value:active::before {\n opacity: 1;\n}\n\n.value svg {\n width: 20px;\n}\n\n.input:hover > :not(.value:hover) {\n transition: 300ms;\n filter: blur(1.5px);\n transform: scale(0.95, 0.95);\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"98419d","snapshot":null,"tags":null,"title":"radio by coding-masala","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":575,"cssLen":1327,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n Option 1\n \n \n \n

\n Option 2\n \n \n \n

\n Option 3\n \n

\n","css":".radio-buttons {\n display: flex;\n flex-direction: column;\n color: white;\n}\n\n.radio-button {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n cursor: pointer;\n}\n\n.radio-button input[type=\"radio\"] {\n display: none;\n}\n\n.radio-circle {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid #aaa;\n position: relative;\n margin-right: 10px;\n}\n\n.radio-circle::before {\n content: \"\";\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #ddd;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: all 0.2s ease-in-out;\n}\n\n.radio-button input[type=\"radio\"]:checked + .radio-circle::before {\n transform: translate(-50%, -50%) scale(1);\n}\n\n.radio-button:nth-of-type(1) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #ff6600;\n}\n\n.radio-button:nth-of-type(2) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #ffffff;\n}\n\n.radio-button:nth-of-type(3) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #26be00;\n}\n\n.radio-label {\n font-size: 16px;\n font-weight: bold;\n}\n\n.radio-button:hover .radio-circle {\n border-color: #555;\n}\n\n.radio-button:hover input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #555;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"f69ba3","snapshot":null,"tags":null,"title":"radio by coding-masala","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":638,"cssLen":1340,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n \n \n Option 1\n \n \n \n \n \n Option 2\n \n \n \n \n \n Option 3\n \n

\n\n\n","css":"* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: Arial, sans-serif;\n background-color: #f1f1f1;\n padding: 20px;\n}\n\n.radio-group {\n display: flex;\n flex-direction: column;\n}\n\n.radio-label {\n display: flex;\n align-items: center;\n padding: 0.5em;\n margin-bottom: 0.5em;\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n transition: background-color 0.2s, border-color 0.2s;\n}\n\n.radio-label:hover {\n background-color: #e6e6e6;\n}\n\n.radio-input {\n position: absolute;\n opacity: 0;\n}\n\n.radio-input:checked + .radio-label {\n background-color: #ffc3c3;\n border-color: #ff1111;\n}\n\n.radio-input:focus + .radio-label {\n outline: 2px solid #ff1111;\n}\n\n.radio-inner-circle {\n display: inline-block;\n width: 1em;\n height: 1em;\n border: 2px solid #888;\n border-radius: 50%;\n margin-right: 0.5em;\n transition: border-color 0.2s;\n position: relative;\n}\n\n.radio-label:hover .radio-inner-circle {\n border-color: #555;\n}\n\n.radio-input:checked + .radio-label .radio-inner-circle {\n border-color: #ff1111;\n}\n\n.radio-input:checked + .radio-label .radio-inner-circle::after {\n content: '';\n display: block;\n width: 0.5em;\n height: 0.5em;\n background-color: #ff1111;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n "}]}},"actionData":null,"errors":null}