uni-app自定义搜索框-自定义按钮及搜索图标

效果图：布局代码：<view class="search-bar"><view class="search-bar-box"><image class="search-span" src="../../static/image/searchSpan.png"/><input type="text" value=""pla

Sun_lightYY

6927人浏览 · 2022-02-18 17:47:55

Sun_lightYY · 2022-02-18 17:47:55 发布

效果图：

在这里插入图片描述
布局代码：

<!-- 搜索框 -->
	 <view class="search-bar">
		 <view class="search-bar-box">
		 <image class="search-span" src="../../static/image/searchSpan.png"/>
		 <input type="text" value=""  placeholder="请输入搜索内容" class="search-text" maxlength="10" focus/>
		 <button class="search-btn">搜索</button>
		 </view>
	 </view>

样式代码

// 搜索框
.search-bar{
	width: 100%;
	height: 100rpx;
	margin-top: 2%;
}
.search-bar-box{
	display: flex;
	margin: 0 auto;
	width: 620rpx;
	height: 70rpx;
	border:5rpx solid #00a8cc;
	border-radius: 50rpx;
}
.search-span{
	width: 100rpx;
	height: 56rpx;
	margin-top: 6rpx;
	margin-left: 30rpx;
}
.search-text{
	width: 100%;
	margin-top: 10rpx;
	margin-left: 20rpx;
	font-size: 30rpx;
	color: #7f7f81;
}
.search-btn{
	background-color: #00a8cc; /* Green */
	color: white;
	text-align: center;
	display: inline-block;
	font-size: 35rpx;
	width: 240rpx;
	height: 70rpx;
	line-height: 65rpx;
	border-radius: 30rpx;
	letter-spacing: 3rpx;
}

*搜索图标来自阿里巴巴矢量图
样式实现如上，有经验的小伙伴可以在评论区分享一下还有什么更优雅的实现方法