如何在select的箭头右侧添加填充？如何在input里添加搜索按钮？

最新推荐文章于 2023-11-02 15:07:24 发布

思想永无止境

最新推荐文章于 2023-11-02 15:07:24 发布

阅读量354

点赞数

分类专栏： Web前端文章标签： css html 前端 bootstrap

欢迎转载，转载请注明原地址，谢谢！

本文链接：https://blog.csdn.net/u012643122/article/details/127899442

版权

Web前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

在select的箭头右侧添加填充：

select {
	margin: 0px 0px 0px 0px  !important;
	/*去掉边框*/
	border-style: none !important;
	border-width: 0px !important;
	padding:3px 6px 3px 6px !important;
	font-size: 14px !important;
	height: 30px !important;
	border-right: 6px solid transparent !important /*添加箭头右侧空隙*/
}
/*input-group是bootstrap里的一个class*/
.input-group{
	width: 210px !important;
	margin: 0px 0px 0px 0px !important;
	padding:2px 2px 2px 2px !important;
	/*模拟select边框*/
	border-radius: 6px 6px 6px 6px !important;
	border-width: 1px !important;
	border-color: #CCCCCC !important;
	border-style: solid !important;
}

<div class="input-group">
	<select class="form-control">
	</select>
</div>

在input里添加搜索按钮：

button{
	margin: 0px 0px 0px 0px  !important;
	/*去掉边框*/
	border-style: none !important;
	border-width: 0px !important;
	color: #495057 !important;
	background-color:rgba(0,0,0,0) !important;
	font-size: 14px !important;
	padding: 4px 20px !important;
	cursor: pointer !important;
	height: 30px !important;
	width: 30px !important;
}
input{
	margin: 0px 0px 0px 0px  !important;
	/*去掉边框*/
	border-style: none !important;
	border-width: 0px !important;
	color: #495057 !important;
	background-color:rgba(0,0,0,0) !important;
	font-size: 14px !important;
	height: 30px !important;
}
/*input-group是bootstrap里的一个class*/
.input-group{
	width: 210px !important;
	margin: 0px 0px 0px 0px !important;
	padding:2px 2px 2px 2px !important;
	/*模拟select边框*/
	border-radius: 6px 6px 6px 6px !important;
	border-width: 1px !important;
	border-color: #CCCCCC !important;
	border-style: solid !important;
}

<div class="input-group">
	<input class="form-control" placeholder="标题" i18n/>
	<button type="button" style="display: inline-block;" class="btn blue">
		<i class="fa fa-search"></i>
		<!-- <span i18n id="searchText">搜索</span> -->
	</button>
</div>