{"html":"

\n \n \n Option 1\n \n \n \n Option 2\n \n \n \n Option 3\n \n \n

","css":".radio-input input {\n display: none;\n}\n\n.radio-input {\n --container_width: 300px;\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 10px;\n background-color: #fff;\n color: #000000;\n width: var(--container_width);\n overflow: hidden;\n border: 1px solid rgba(53, 52, 52, 0.226);\n}\n\n.radio-input label {\n width: 100%;\n padding: 10px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n font-weight: 600;\n letter-spacing: -1px;\n font-size: 14px;\n}\n\n.selection {\n display: none;\n position: absolute;\n height: 100%;\n width: calc(var(--container_width) / 3);\n z-index: 0;\n left: 0;\n top: 0;\n transition: .15s ease;\n}\n\n.radio-input label:has(input:checked) {\n color: #fff;\n}\n\n.radio-input label:has(input:checked) ~ .selection {\n background-color: rgb(11 117 223);\n display: inline-block;\n}\n\n.radio-input label:nth-child(1):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 0/3));\n}\n\n.radio-input label:nth-child(2):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 1/3));\n}\n\n.radio-input label:nth-child(3):has(input:checked) ~ .selection {\n transform: translateX(calc(var(--container_width) * 2/3));\n}"}

orange-eagle-19

👁 实时预览

📝 源代码

🔗 相关联的样式