{"html":"\n","css":"/* From Uiverse.io by cbolson */\n.my-form {\n --_clr-primary: #666;\n --_clr-hover: #f33195;\n --_clr-checked: #127acf;\n}\n.my-form > div {\n --_clr-current: var(--_clr-primary);\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.my-form > div + div {\n margin-block-start: 0.5rem;\n}\n.my-form label {\n cursor: pointer;\n color: var(--_clr-current);\n transition: color 150ms ease-in-out;\n}\n/* styled radio */\n.my-form input[type=\"radio\"] {\n appearance: none;\n outline: none;\n width: 1.5rem;\n height: 1.5rem;\n aspect-ratio: 1;\n padding: 0.25rem;\n background: transparent;\n border: 1px solid var(--_clr-current);\n border-radius: 50%;\n display: grid;\n place-content: center;\n cursor: pointer;\n position: relative;\n}\n.my-form input[type=\"radio\"]::after {\n content: \"\";\n position: absolute;\n inset: 0.25rem;\n opacity: 0;\n scale: 0;\n transition:\n opacity 150ms ease-in-out,\n scale 150ms ease-in-out;\n background-color: var(--_clr-checked);\n border-radius: inherit;\n}\n\n.my-form label:hover,\n.my-form input[type=\"radio\"]:focus-visible,\n.my-form input[type=\"radio\"]:focus-visible + label,\n.my-form input[type=\"radio\"]:hover,\n.my-form input[type=\"radio\"]:hover + label {\n --_clr-current: var(--_clr-hover);\n}\n.my-form input[type=\"radio\"]:focus-visible::after,\n.my-form input[type=\"radio\"]:hover::after {\n opacity: 0.5;\n scale: 1;\n background-color: var(--_clr-hover);\n}\n\n.my-form input[type=\"radio\"]:checked + label:not(:hover),\n.my-form input[type=\"radio\"]:checked:not(:hover) {\n --_clr-current: var(--_clr-checked);\n}\n.my-form input[type=\"radio\"]:checked::after {\n opacity: 1;\n scale: 1;\n}\n"}

ugly-yak-75

👁 实时预览

📝 源代码