.wux-class-flex { display: flex; align-items: center; } .wux-search-bar { position: relative; padding: 16rpx 20rpx; display: -ms-flexbox; display: flex; box-sizing: border-box; background-color: #efeff4 } .wux-search-bar::before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 2rPX; /* border-top: 2rPX solid #d9d9d9; */ color: #d9d9d9; transform-origin: 0 0; transform: scaleY(.5) } .wux-search-bar::after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 2rPX; border-bottom: 2rPX solid #d9d9d9; color: #d9d9d9; transform-origin: 0 100%; transform: scaleY(.5) } .wux-search-bar__form { position: relative; -ms-flex: 1; flex: 1; width: 100%; height: 56rpx; overflow: hidden; background-color: #fff; background-clip: padding-box; border-radius: 8rpx } .wux-search-bar__box { position: relative; padding-left: 60rpx; padding-right: 60rpx; height: 100%; width: 100%; box-sizing: border-box; z-index: 1 } .wux-search-bar__input { padding: 8rpx 0; width: 100%; height: 56rpx; min-height: inherit; border: 0; font-size: 28rpx; line-height: 56rpx; box-sizing: border-box; background: 0 0 } .wux-search-bar__label { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; position: absolute; top: 2rpx; right: 2rpx; bottom: 2rpx; left: 2rpx; z-index: 2; border-radius: 8rpx; text-align: center; color: rgba(0, 0, 0, .45); background: #fff } .wux-search-bar__text { display: inline-block; font-size: 28rpx; vertical-align: middle; margin-left: 10rpx } .wux-search-bar__cancel { margin-left: 20rpx; line-height: 56rpx; /* color: #33cd5f; */ white-space: nowrap; font-size: 36rpx; font-family: PingFangSC-Medium; color: #FA7D22; } .wux-search-bar__icon { vertical-align: middle } .wux-search-bar__search { position: absolute; left: 20rpx; top: 16rpx } .wux-search-bar__clear { display: none; position: absolute; top: 16rpx; right: 0; padding: 0 20rpx } .wux-search-bar--focus .wux-search-bar__clear { display: block } .wux-search-bar--disabled { opacity: .3 }