{"html":"

\n \n \n \n

\n\n

\n\n \n

\n\n

\n \n

","css":".searchbar {\n font-size: 14px;\n font-family: arial, sans-serif;\n color: #202124;\n display: flex;\n z-index: 3;\n height: 44px;\n background: white;\n border: 1px solid #dfe1e5;\n box-shadow: none;\n border-radius: 24px;\n margin: 0 auto;\n width: auto;\n max-width: 224px;\n}\n\n.searchbar:hover {\n box-shadow: 0 1px 6px rgb(32 33 36 / 28%);\n border-color: rgba(223,225,229,0);\n}\n\n.searchbar-wrapper {\n flex: 1;\n display: flex;\n padding: 5px 8px 0 14px;\n}\n\n.searchbar-left {\n font-size: 14px;\n font-family: arial, sans-serif;\n color: #202124;\n display: flex;\n align-items: center;\n padding-right: 13px;\n margin-top: -5px;\n}\n\n.search-icon-wrapper {\n margin: auto;\n}\n\n.search-icon {\n margin-top: 3px;\n color: #9aa0a6;\n height: 20px;\n line-height: 20px;\n width: 20px;\n}\n\n.searchbar-icon {\n display: inline-block;\n fill: currentColor;\n height: 24px;\n line-height: 24px;\n position: relative;\n width: 24px;\n}\n\n.searchbar-center {\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n}\n\n.searchbar-input-spacer {\n color: transparent;\n flex: 100%;\n white-space: pre;\n height: 34px;\n font-size: 16px;\n}\n\n.searchbar-input {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n color: rgba(0, 0, 0, .87);\n word-wrap: break-word;\n outline: none;\n display: flex;\n flex: 100%;\n margin-top: -37px;\n height: 34px;\n font-size: 16px;\n max-width: 100%;\n width: 100%;\n}\n\n.searchbar-right {\n display: flex;\n flex: 0 0 auto;\n margin-top: -5px;\n align-items: stretch;\n flex-direction: row\n}\n\n.searchbar-clear-icon {\n margin-right: 12px\n}\n\n.voice-search {\n flex: 1 0 auto;\n display: flex;\n cursor: pointer;\n align-items: center;\n border: 0;\n background: transparent;\n outline: none;\n padding: 0 8px;\n width: 2.8em;\n}"}

orange-bat-25

👁 实时预览

📝 源代码