【微信小程序】搜索框样式

实现微信小程序搜索框样式

搜索框效果：

代码实现：（复制可用）

index.wxml：

<view>
  <view class="top">
    <view class="search">
      <view class="search_in">
        
        <image src="../../image/search.png">image>
        <input type="text" placeholder="请输入搜索内容"/>
        <view class="search_btn">搜索view>
      view>
    view>
  view>
view>

index.wxss：

/* pages/index/index.wxss */
.search {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
  background-color: #16a0f8;
}
.search .search_in {
  display: flex;
  align-items: center;
  justify-content:space-between;
  padding:0 20rpx ;
  box-sizing: border-box;
  height: 70rpx;
  width: 710rpx;
  background-color: #ffffff;
  border-radius: 35rpx;
}
.search_in image {
  height: 45rpx;
  width: 45rpx;
}
.search input {
  width: 480rpx;
}
.search_in .search_btn {
  height: 55rpx;
  width: 110rpx;
  border-radius: 55rpx;
  background-color: #6cd3ff;
  color: #ffffff;
  text-align: center;
  line-height: 55rpx;
  cursor: pointer;
}