{"html":"

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

\n","css":".uiverse-pixel-radio-group {\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n border-radius: 0.5em;\n font-family: \"Courier New\", monospace;\n}\n\n.uiverse-pixel-radio {\n display: flex;\n align-items: center;\n gap: 0.75em;\n cursor: pointer;\n font-size: 1em;\n font-weight: bold;\n color: #fff;\n text-shadow: 1px 1px #000;\n position: relative;\n}\n\n.uiverse-pixel-radio input[type=\"radio\"] {\n appearance: none;\n width: 1.5em;\n height: 1.5em;\n background: #ff6b35;\n border: none;\n box-shadow:\n 0 0 0 0.15em #000,\n 0 0 0 0.3em #fff,\n 0 0 0 0.45em #000;\n image-rendering: pixelated;\n margin: 0;\n transition: all 0.1s steps(1);\n position: relative;\n}\n\n.uiverse-pixel-radio input[type=\"radio\"]::before {\n content: \"\";\n display: block;\n width: 0.75em;\n height: 0.75em;\n background: #fff;\n margin: auto;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: transform 0.1s ease-out;\n box-shadow: 0 0 0 1px #000;\n}\n\n.uiverse-pixel-radio input[type=\"radio\"]:checked::before {\n transform: translate(-50%, -50%) scale(1);\n background: #000;\n}\n\n.uiverse-pixel-radio input[type=\"radio\"]:hover {\n background: #ff8c42;\n}\n\n.uiverse-pixel-radio input[type=\"radio\"]:active {\n background: #e55a2b;\n transform: translateY(0.125em);\n}\n\n.uiverse-pixel-radio input[type=\"radio\"]:focus-visible {\n outline: 2px dashed #fff;\n outline-offset: 0.2em;\n}\n"}

quiet-firefox-74

👁 实时预览

📝 源代码