修改uview搜索框样式

最新推荐文章于 2025-03-17 08:57:15 发布

大药小蓝

最新推荐文章于 2025-03-17 08:57:15 发布

阅读量6.7k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_41919594/article/details/122167942

版权

HTML

<view class="searchButton">
		<u-search placeholder="请输入学员姓名/手机号/身份证号" v-model="keyword" height="80" border-color='#1A90FF' :show-action='false' search-icon=''>
		</u-search>
		<u-button class="searchButtons" :custom-style="searchStyle" :hair-line='false'>搜索</u-button>
</view>

样式

searchStyle:{
	background: 'linear-gradient(180deg, #01A2F0 0%, #76D8E4 100%)',
	borderRadius: '40upx',
	fontSize: '14px',
	fontWeight: '400',
	color: '#FFFFFF',
	lineHeight: '40upx',
	border: 'none',
}
.searchButton{
	margin-top: 20upx;
	display: flex;
	.searchButtons{
	    position:absolute;
	    right: 0;
	}
}