{"html":"\n \n /\n \n ","css":".search-label {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n border: 1px solid transparent;\n border-radius: 12px;\n overflow: hidden;\n background: #3D3D3D;\n padding: 9px;\n cursor: text;\n}\n\n.search-label:hover {\n border-color: gray;\n}\n\n.search-label:focus-within {\n background: #464646;\n border-color: gray;\n}\n\n.search-label input {\n outline: none;\n width: 100%;\n border: none;\n background: none;\n color: rgb(162, 162, 162);\n}\n\n.search-label input:focus+.slash-icon,\n.search-label input:valid+.slash-icon {\n display: none;\n}\n\n.search-label input:valid~.search-icon {\n display: block;\n}\n\n.search-label input:valid {\n width: calc(100% - 22px);\n transform: translateX(20px);\n}\n\n.search-label svg,\n.slash-icon {\n position: absolute;\n color: #7e7e7e;\n}\n\n.search-icon {\n display: none;\n width: 12px;\n height: auto;\n}\n\n.slash-icon {\n right: 7px;\n border: 1px solid #393838;\n background: linear-gradient(-225deg, #343434, #6d6d6d);\n border-radius: 3px;\n text-align: center;\n box-shadow: inset 0 -2px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 1px rgba(28, 28, 29, 0.4);\n cursor: pointer;\n font-size: 12px;\n width: 15px;\n}\n\n.slash-icon:active {\n box-shadow: inset 0 1px 0 0 #3f3f3f, inset 0 0 1px 1px rgb(94, 93, 93), 0 1px 2px 0 rgba(28, 28, 29, 0.4);\n text-shadow: 0 1px 0 #7e7e7e;\n color: transparent;\n}"}

breezy-wolverine-23

👁 实时预览

📝 源代码