nutui-taro-upgrade/dist/packages/searchbar/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.nut-theme-dark .nut-searchbar{background:var(--nut-dark-background, #131313)}.nut-theme-dark .nut-searchbar__search-label{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-searchbar .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-searchbar .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close:hover{cursor:pointer;color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-theme-dark .nut-searchbar__right-search-icon,.nut-theme-dark .nut-searchbar__left-search-icon{color:var(--nut-dark-color, var(--nut-white, #fff))}.nut-searchbar{display:flex;align-items:center;width:var(--nut-searchbar-width, 100%);padding:var(--nut-searchbar-padding, 9px 16px);background:var(--nut-searchbar-background, var(--nut-white, #fff));box-sizing:border-box;color:var(--nut-searchbar-input-bar-color, inherit)}.nut-searchbar.safe-area-inset-bottom{position:relative;margin-bottom:constant(safe-area-inset-bottom);margin-bottom:env(safe-area-inset-bottom)}.nut-searchbar.safe-area-inset-bottom::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:constant(safe-area-inset-bottom);height:env(safe-area-inset-bottom);background:var(--nut-searchbar-background, var(--nut-white, #fff))}.nut-searchbar::placeholder{color:var(--nut-searchbar-input-bar-placeholder-color, inherit)}.nut-searchbar__search-label{padding:0 5px;color:#323233}.nut-searchbar__search-input{display:flex;align-items:center;width:var(--nut-searchbar-input-width, 100%);height:var(--nut-searchbar-input-height, 32px);flex:1;padding:var(--nut-searchbar-input-padding, 0 0 0 13px);border-radius:var(--nut-searchbar-input-border-radius, 16px);box-shadow:var(--nut-searchbar-input-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.04));background:var(--nut-searchbar-input-background, #f7f7f7);box-sizing:border-box}.nut-searchbar__search-input.square{border-radius:0}.nut-searchbar__search-input .nut-searchbar__input-inner{display:flex;position:relative;flex:1;align-items:center;overflow:hidden}.nut-searchbar__search-input .nut-searchbar__input-inner>taro-form-core{width:100%}.nut-searchbar__search-input .nut-searchbar__input-inner .nut-searchbar__input-form{flex:1;overflow:hidden}.nut-searchbar__search-input .nut-searchbar__input-inner input{width:100%;height:100%;padding-left:4px}.nut-searchbar__search-input .nut-searchbar__input-inner-icon{display:flex;align-items:center;position:relative;padding:0 7px}.nut-searchbar__search-input .nut-searchbar__input-clear{position:relative;z-index:10;padding:0 5px}.nut-searchbar__search-input .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close{color:#ccc}.nut-searchbar__search-input .nut-searchbar__input-clear .nut-searchbar__nut-icon-mask-close:hover{cursor:pointer;color:#686868}.nut-searchbar__search-input .nut-searchbar__input-inner-icon-absolute .nut-searchbar__input-clear{position:absolute;z-index:10;left:-20px}.nut-searchbar__search-input .nut-searchbar__iptleft-search-icon{margin-right:6px;width:14px;height:14px}.nut-searchbar__search-input .nut-searchbar__iptright-search-icon{margin-left:5px}.nut-searchbar__search-input .nut-searchbar__input-bar{width:100%;height:36px;flex:1;padding:0;margin:0;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);outline:none;font-size:14px}.nut-searchbar__search-input .nut-searchbar__input-bar_clear{max-width:290px}.nut-searchbar__search-input .nut-searchbar__input-inner-absolute .nut-searchbar__input-bar{box-sizing:border-box;padding-right:20px}.nut-searchbar__left-search-icon{margin-right:8px}.nut-searchbar__search-icon{display:flex;justify-content:center;align-items:center}.nut-searchbar__right-search-icon{margin-left:16px;font-size:14px;color:var(--nut-searchbar-right-out-color, var(--nut-black, #000))}