{"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 transition: background-color 0.3s ease;\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: #b0b0b0;\n}\n\n.radio-input input[type=\"radio\"]#color-2 + label span {\n background-color: #b0b0b0;\n}\n\n.radio-input input[type=\"radio\"]#color-3 + label span {\n background-color: #b0b0b0;\n}\n\n.radio-input input[type=\"radio\"]:checked + label span {\n background-color: #ff4500; /* Change to orange when checked */\n}\n\n.radio-input input[type=\"radio\"]:checked + label span svg {\n opacity: 1;\n}\n\n.radio-input input[type=\"radio\"]#color-1:checked ~ label[for=\"color-2\"] span,\n.radio-input input[type=\"radio\"]#color-1:checked ~ label[for=\"color-3\"] span {\n background-color: #b0b0b0; /* Gray color when not checked */\n}\n\n.radio-input input[type=\"radio\"]#color-2:checked ~ label[for=\"color-1\"] span,\n.radio-input input[type=\"radio\"]#color-2:checked ~ label[for=\"color-3\"] span {\n background-color: #b0b0b0; /* Gray color when not checked */\n}\n\n.radio-input input[type=\"radio\"]#color-3:checked ~ label[for=\"color-1\"] span,\n.radio-input input[type=\"radio\"]#color-3:checked ~ label[for=\"color-2\"] span {\n background-color: #b0b0b0; /* Gray color when not checked */\n}\n"}

empty-falcon-21

👁 实时预览

📝 源代码