{"html":"

\n \n \n

\n Option 1\n \n \n \n

\n Option 2\n \n \n \n

\n Option 3\n \n

\n","css":".radio-buttons {\n display: flex;\n flex-direction: column;\n color: white;\n}\n\n.radio-button {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n cursor: pointer;\n}\n\n.radio-button input[type=\"radio\"] {\n display: none;\n}\n\n.radio-circle {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n border: 2px solid #aaa;\n position: relative;\n margin-right: 10px;\n}\n\n.radio-circle::before {\n content: \"\";\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: #ddd;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0);\n transition: all 0.2s ease-in-out;\n}\n\n.radio-button input[type=\"radio\"]:checked + .radio-circle::before {\n transform: translate(-50%, -50%) scale(1);\n}\n\n.radio-button:nth-of-type(1) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #ff6600;\n}\n\n.radio-button:nth-of-type(2) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #ffffff;\n}\n\n.radio-button:nth-of-type(3) input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #26be00;\n}\n\n.radio-label {\n font-size: 16px;\n font-weight: bold;\n}\n\n.radio-button:hover .radio-circle {\n border-color: #555;\n}\n\n.radio-button:hover input[type=\"radio\"]:checked + .radio-circle::before {\n background-color: #555;\n}\n"}

pink-ape-66

👁 实时预览

📝 源代码