{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

","css":".radio-input {\n background-color: #fff;\n padding: 20px;\n border-radius: 20px;\n display: flex;\n}\n\n.radio-input input[type=radio] {\n display: none;\n}\n\n.radio-input input[type=radio] + label {\n color: #333;\n font-family: Arial, sans-serif;\n font-size: 14px;\n}\n\n.radio-input input[type=radio] + label span {\n display: inline-block;\n width: 40px;\n height: 40px;\n margin: -1px 4px 0 0;\n vertical-align: middle;\n cursor: pointer;\n border-radius: 50%;\n border: 2px solid #FFFFFF;\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);\n background-repeat: no-repeat;\n background-position: center;\n text-align: center;\n line-height: 44px;\n}\n\n.radio-input input[type=radio] + label span svg {\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n.radio-input input[type=radio]#color-1 + label span {\n background-color: #2ecc71;\n}\n\n.radio-input input[type=radio]#color-2 + label span {\n background-color: #3498db;\n}\n\n.radio-input input[type=radio]#color-3 + label span {\n background-color: #f1c40f;\n}\n\n.radio-input input[type=radio]:checked + label span svg {\n opacity: 1;\n}\n\n.radio-input:has(input[type=radio]#color-1:checked) {\n background-color: #2ecc71;\n}\n\n.radio-input:has(input[type=radio]#color-2:checked) {\n background-color: #3498db;\n}\n\n.radio-input:has(input[type=radio]#color-3:checked) {\n background-color: #f1c40f;\n}\n"}

tough-rat-92

👁 实时预览

📝 源代码