{"html":"

\n \n \n \n Male\n \n

\n\n

\n \n \n \n Female\n \n

\n\n

\n \n \n \n Other\n \n

\n","css":".radio-container {\n margin: 0 auto;\n max-width: 300px;\n color: white;\n}\n\n.radio-wrapper {\n margin-bottom: 20px;\n}\n\n.radio-button {\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n}\n\n.radio-button:hover {\n transform: translateY(-2px);\n}\n\n.radio-button input[type=\"radio\"] {\n display: none;\n}\n\n.radio-checkmark {\n display: inline-block;\n position: relative;\n width: 16px;\n height: 16px;\n margin-right: 10px;\n border: 2px solid #333;\n border-radius: 50%;\n}\n\n.radio-checkmark:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #333;\n transition: all 0.2s ease-in-out;\n}\n\n.radio-button input[type=\"radio\"]:checked ~ .radio-checkmark:before {\n transform: translate(-50%, -50%) scale(1);\n}\n\n.radio-label {\n font-size: 16px;\n font-weight: 600;\n}\n"}

dull-lizard-58

👁 实时预览

📝 源代码