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

wet-emu-59

👁 实时预览

📝 源代码