{"html":"

\n \n

\n Walk\n

\n\n

\n \n

\n Bike\n

\n\n

\n \n

\n Drive\n

\n","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.radio-tile-group {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.radio-tile-group .input-container {\n position: relative;\n height: 80px;\n width: 80px;\n margin: 0.5rem;\n}\n\n.radio-tile-group .input-container .radio-button {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n margin: 0;\n cursor: pointer;\n}\n\n.radio-tile-group .input-container .radio-tile {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n border: 2px solid #079ad9;\n border-radius: 5px;\n padding: 1rem;\n transition: transform 300ms ease;\n}\n\n.radio-tile-group .input-container .icon svg {\n fill: #079ad9;\n width: 2rem;\n height: 2rem;\n}\n\n.radio-tile-group .input-container .radio-tile-label {\n text-align: center;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile {\n background-color: #079ad9;\n border: 2px solid #079ad9;\n color: white;\n transform: scale(1.1, 1.1);\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {\n fill: white;\n background-color: #079ad9;\n}\n\n.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {\n color: white;\n background-color: #079ad9;\n}\n"}

bitter-rabbit-96

👁 实时预览

📝 源代码