{"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}"}

cuddly-sheep-92

👁 实时预览

📝 源代码