@nutui/nutui-react-taro/dist/esm/SearchBar/style/style.css

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

.nut-searchbar{display:flex;align-items:center;width:var(--nutui-searchbar-width, 100%);padding:var(--nutui-searchbar-padding, 6px 16px);background:var(--nutui-searchbar-background, var(--nutui-gray-3, #f6f6f6));color:var(--nutui-searchbar-color, var(--nutui-gray-7, #1a1a1a));font-size:var(--nutui-searchbar-font-size, var(--nutui-font-size-3, 14px));box-sizing:border-box;justify-content:center}.nut-searchbar-content{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--nutui-searchbar-content-padding, 0 12px);height:var(--nutui-searchbar-input-height, 32px);background:var(--nutui-searchbar-content-background, var(--nutui-gray-1, #ffffff));border-radius:var(--nutui-searchbar-content-border-radius, 4px)}.nut-searchbar-icon{display:flex;justify-content:center;align-items:center}.nut-searchbar-clear,.nut-searchbar-rightin{width:16px;height:16px;color:var(--nutui-black-5)}.nut-searchbar-left,.nut-searchbar-right{display:flex}.nut-searchbar-left.nut-icon,.nut-searchbar-right.nut-icon{width:20px;height:20px}.nut-searchbar-left{margin-right:var(--nutui-searchbar-gap, 16px)}.nut-searchbar-left>div,.nut-searchbar-left>span,.nut-searchbar-left>svg{margin-right:var(--nutui-searchbar-gap, 16px)}.nut-searchbar-left>div:last-child,.nut-searchbar-left>span:last-child,.nut-searchbar-left>svg:last-child{margin-right:0}.nut-searchbar-right{margin-left:var(--nutui-searchbar-gap, 16px)}.nut-searchbar-right>div,.nut-searchbar-right>span,.nut-searchbar-right>svg{margin-left:var(--nutui-searchbar-gap, 16px)}.nut-searchbar-right>div:first-child,.nut-searchbar-right>span:first-child,.nut-searchbar-right>svg:first-child{margin-left:0}.nut-searchbar-left>text,.nut-searchbar-left>view{margin-right:var(--nutui-searchbar-gap, 16px)}.nut-searchbar-left>text:last-child,.nut-searchbar-left>view:last-child{margin-right:0}.nut-searchbar-right>text,.nut-searchbar-right>view{margin-left:var(--nutui-searchbar-gap, 16px)}.nut-searchbar-right>text:first-child,.nut-searchbar-right>view:first-child{margin-left:0}.nut-searchbar-input-box{display:flex;align-items:center;flex:1}.nut-searchbar-input{display:flex;align-items:center;border:0;outline:0;box-sizing:border-box;width:100%;height:var(--nutui-searchbar-input-height, 32px);line-height:var(--nutui-searchbar-input-height, 32px);padding:var(--nutui-searchbar-input-padding, 0 4px);font-size:var(--nutui-searchbar-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-searchbar-input-text-color, var(--nutui-gray-7, #1a1a1a));caret-color:var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7, #1a1a1a));background:transparent;text-align:var(--nutui-searchbar-input-text-align, left)}.nut-searchbar-round{border-radius:var(--nutui-searchbar-content-round-border-radius, 18px)}.nut-searchbar-disabled{cursor:not-allowed}[dir=rtl] .nut-searchbar-left,.nut-rtl .nut-searchbar-left{margin-right:0;margin-left:var(--nutui-searchbar-gap, 16px)}[dir=rtl] .nut-searchbar-left>div,[dir=rtl] .nut-searchbar-left>span,[dir=rtl] .nut-searchbar-left>svg,.nut-rtl .nut-searchbar-left>div,.nut-rtl .nut-searchbar-left>span,.nut-rtl .nut-searchbar-left>svg{margin-right:0;margin-left:var(--nutui-searchbar-gap, 16px)}[dir=rtl] .nut-searchbar-left>div.nut-icon,[dir=rtl] .nut-searchbar-left>span.nut-icon,[dir=rtl] .nut-searchbar-left>svg.nut-icon,.nut-rtl .nut-searchbar-left>div.nut-icon,.nut-rtl .nut-searchbar-left>span.nut-icon,.nut-rtl .nut-searchbar-left>svg.nut-icon{transform:rotate(180deg)}[dir=rtl] .nut-searchbar-left>div:last-child,[dir=rtl] .nut-searchbar-left>span:last-child,[dir=rtl] .nut-searchbar-left>svg:last-child,.nut-rtl .nut-searchbar-left>div:last-child,.nut-rtl .nut-searchbar-left>span:last-child,.nut-rtl .nut-searchbar-left>svg:last-child{margin-right:0;margin-left:0}[dir=rtl] .nut-searchbar-right,.nut-rtl .nut-searchbar-right{margin-left:0;margin-right:var(--nutui-searchbar-gap, 16px)}[dir=rtl] .nut-searchbar-right>div,[dir=rtl] .nut-searchbar-right>span,[dir=rtl] .nut-searchbar-right>svg,.nut-rtl .nut-searchbar-right>div,.nut-rtl .nut-searchbar-right>span,.nut-rtl .nut-searchbar-right>svg{margin-left:0;margin-right:var(--nutui-searchbar-gap, 16px)}[dir=rtl] .nut-searchbar-right>div:first-child,[dir=rtl] .nut-searchbar-right>span:first-child,[dir=rtl] .nut-searchbar-right>svg:first-child,.nut-rtl .nut-searchbar-right>div:first-child,.nut-rtl .nut-searchbar-right>span:first-child,.nut-rtl .nut-searchbar-right>svg:first-child{margin-left:0;margin-right:0}[dir=rtl] .nut-searchbar-left>text,[dir=rtl] .nut-searchbar-left>view,.nut-rtl .nut-searchbar-left>text,.nut-rtl .nut-searchbar-left>view{margin-right:0;margin-left:var(--nutui-searchbar-gap, 16px)}[dir=rtl] .nut-searchbar-left>text:last-child,[dir=rtl] .nut-searchbar-left>view:last-child,.nut-rtl .nut-searchbar-left>text:last-child,.nut-rtl .nut-searchbar-left>view:last-child{margin-right:0;margin-left:0}[dir=rtl] .nut-searchbar-right>text,[dir=rtl] .nut-searchbar-right>view,.nut-rtl .nut-searchbar-right>text,.nut-rtl .nut-searchbar-right>view{margin-left:0;margin-right:var(--nutui-searchbar-gap, 16px)}[dir=rtl] .nut-searchbar-right>text:first-child,[dir=rtl] .nut-searchbar-right>view:first-child,.nut-rtl .nut-searchbar-right>text:first-child,.nut-rtl .nut-searchbar-right>view:first-child{margin-left:0;margin-right:0}[dir=rtl] .nut-searchbar-input,.nut-rtl .nut-searchbar-input{text-align:var(--nutui-searchbar-input-text-align, right)}