{"html":"

\n \n

\n Option\n

\n \n

\n Option\n

\n \n

\n Option\n

\n","css":".wrapper {\n --font-color-dark: #323232;\n --font-color-light: #FFF;\n --bg-color: #fff;\n --main-color: #323232;\n position: relative;\n width: 250px;\n height: 36px;\n background-color: var(--bg-color);\n border: 2px solid var(--main-color);\n border-radius: 34px;\n display: flex;\n flex-direction: row;\n box-shadow: 4px 4px var(--main-color);\n}\n\n.option {\n width: 80.5px;\n height: 28px;\n position: relative;\n top: 2px;\n left: 2px;\n}\n\n.input {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n appearance: none;\n cursor: pointer;\n}\n\n.btn {\n width: 100%;\n height: 100%;\n background-color: var(--bg-color);\n border-radius: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span {\n color: var(--font-color-dark);\n}\n\n.input:checked + .btn {\n background-color: var(--main-color);\n}\n\n.input:checked + .btn .span {\n color: var(--font-color-light);\n}"}

stupid-seahorse-9

👁 实时预览

📝 源代码

🔗 相关联的样式