{"loaderData":{"0":null,"0-2":{"total":7177,"projects":[{"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 "},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"d2180c","snapshot":null,"tags":null,"title":"radio by amikambs","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3099,"cssLen":764,"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 \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 fill: #666;\n}\n\n.rating:not(:checked) > label > svg {\n fill: #666; /* Set default color for SVG */\n transition: fill 0.3s ease; /* Add a transition effect */\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 fill: #e58e09;\n}\n\n.rating:not(:checked) > label:hover,\n.rating:not(:checked) > label:hover ~ label {\n fill: #ff9e0b;\n}\n\n.rating > input:checked ~ label > svg {\n fill: #ffa723; /* Set color for selected stars */\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"2899d7","snapshot":null,"tags":null,"title":"radio by AmIt-DasIT","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":365,"cssLen":701,"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 \n \n

","css":".radio-input .label input {\n display: none;\n}\n\n.radio-input {\n display: flex;\n gap: 20px;\n}\n\n.radio-input .label {\n display: flex;\n}\n\n.radio-input .label .check {\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n cursor: pointer;\n transition: 0.3s;\n border: 3px solid transparent;\n box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),\n -1px -1px 4px rgba(255, 255, 255, 0.5);\n}\n\n.radio-input .label input:checked + .check {\n box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5),\n -1px -1px 4px rgba(255, 255, 255, 0.5),\n inset 3px 3px 6px rgba(0, 0, 0, 0.5),\n inset -1px -1px 4px rgba(255, 255, 255, 0.5);\n transform: scale(1.1);\n}"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"f92b4f","snapshot":null,"tags":null,"title":"radio by Shoh2008","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":283,"cssLen":978,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n\t\n\t\n

","css":".radio {\n background: #454857;\n padding: 4px;\n border-radius: 3px;\n box-shadow: inset 0 0 0 3px rgba(35, 33, 45, 0.3),\n\t\t0 0 0 3px rgba(185, 185, 185, 0.3);\n position: relative;\n}\n\n.radio input {\n width: auto;\n height: 100%;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n cursor: pointer;\n border-radius: 2px;\n padding: 4px 8px;\n background: #454857;\n color: #bdbdbdbd;\n font-size: 14px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n\t\t\"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",\n\t\t\"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n transition: all 100ms linear;\n}\n\n.radio input:checked {\n background-image: linear-gradient(180deg, #95d891, #74bbad);\n color: #fff;\n box-shadow: 0 1px 1px #0000002e;\n text-shadow: 0 1px 0px #79485f7a;\n}\n\n.radio input:before {\n content: attr(label);\n display: inline-block;\n text-align: center;\n width: 100%;\n}\n"},{"created":"2024-01-22T17:18:03.000Z","isPrivate":0,"projectId":"124ffb","snapshot":null,"tags":null,"title":"radio by Yaya12085","updated":"2024-01-22T17:18:03.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":631,"cssLen":1548,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n What does CSS stand for?\n 3/10\n

\n \n Computer Style Sheets\n \n Cascading Style Sheets\n \n Creative Style Sheets\n Congratulations!\n Bad answer\n

","css":".radio-input input {\n display: none;\n}\n\n.radio-input {\n display: flex;\n flex-direction: column;\n padding: 12px;\n background: #fff;\n color: #000;\n border-radius: 10px;\n box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);\n width: 320px;\n}\n\n.info {\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.question {\n color: rgb(49, 49, 49);\n font-size: 1rem;\n line-height: 1rem;\n font-weight: 800;\n}\n\n.steps {\n background-color: rgb(0, 0, 0);\n padding: 4px;\n color: #fff;\n border-radius: 4px;\n font-size: 12px;\n line-height: 12px;\n font-weight: 600;\n}\n\n.radio-input label {\n display: flex;\n background-color: #fff;\n padding: 14px;\n margin: 8px 0 0 0;\n font-size: 13px;\n font-weight: 600;\n border-radius: 10px;\n cursor: pointer;\n border: 1px solid rgba(187, 187, 187, 0.164);\n color: #000;\n transition: .3s ease;\n}\n\n.radio-input label:hover {\n background-color: rgba(24, 24, 24, 0.13);\n border: 1px solid #bbb;\n}\n\n.result {\n margin-top: 10px;\n font-weight: 600;\n font-size: 12px;\n display: none;\n transition: display .4s ease;\n}\n\n.result.success {\n color: green;\n}\n\n.result.error {\n color: red;\n}\n\n.radio-input input:checked + label {\n border-color: red;\n color: red;\n}\n\n.radio-input input[value=\"value-2\"]:checked + label {\n border-color: rgb(22, 245, 22);\n color: rgb(16, 184, 16);\n}\n\n.radio-input:has(input[value=\"value-2\"]:checked) .result.success {\n display: flex;\n}\n\n.radio-input:has(input:not([value=\"value-2\"]):checked ) .result.error {\n display: flex;\n}"}]}},"actionData":null,"errors":null}