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

搜索框效果：

代码实现：（复制可用）

index.wxml：

<!--pages/index/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;}