{"html":"

\n \n

","css":".container {\n position: relative;\n box-sizing: border-box;\n width: fit-content;\n}\n\n.mainbox {\n box-sizing: border-box;\n position: relative;\n width: 230px;\n height: 50px;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n justify-content: center;\n border-radius: 160px;\n background-color: rgb(0, 0, 0);\n transition: all 0.3s ease;\n}\n\n.checkbox:focus {\n border: none;\n outline: none;\n}\n\n.checkbox:checked {\n right: 10px;\n}\n\n.checkbox:checked ~ .mainbox {\n width: 50px;\n}\n\n.checkbox:checked ~ .mainbox .search_input {\n width: 0;\n height: 0px;\n}\n\n.checkbox:checked ~ .mainbox .iconContainer {\n padding-right: 8px;\n}\n\n.checkbox {\n box-sizing: border-box;\n width: 30px;\n height: 30px;\n position: absolute;\n right: 17px;\n top: 10px;\n z-index: 9;\n cursor: pointer;\n appearance: none;\n}\n\n.search_input {\n box-sizing: border-box;\n height: 100%;\n width: 170px;\n background-color: transparent;\n border: none;\n outline: none;\n padding-bottom: 4px;\n padding-left: 10px;\n font-size: 1em;\n color: white;\n transition: all 0.3s ease;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.search_input::placeholder {\n color: rgba(255, 255, 255, 0.776);\n}\n\n.iconContainer {\n box-sizing: border-box;\n padding-top: 5px;\n width: fit-content;\n transition: all 0.3s ease;\n}\n\n.search_icon {\n box-sizing: border-box;\n fill: white;\n font-size: 1.3em;\n}"}

moody-swan-60

👁 实时预览

📝 源代码