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

最新推荐文章于 2025-11-25 10:28:53 发布

原创最新推荐文章于 2025-11-25 10:28:53 发布 · 9.2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #小程序

前端专栏收录该内容

8 篇文章

订阅专栏

本文分享了如何使用HTML和CSS优雅地设计了一个搜索框，包括布局代码的flex布局和样式细节，还邀请读者分享更高效的设计思路。

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

效果图：

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

<!-- 搜索框 -->
	 <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;
}

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

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step