在搜索框里添加放大镜的图标，且显示提示信息

最新推荐文章于 2023-11-20 09:32:39 发布

weixin_30655219

最新推荐文章于 2023-11-20 09:32:39 发布

阅读量7.5k

点赞数 2

文章标签：数据库

原文链接：http://www.cnblogs.com/ivanlee-ee-233/p/6778038.html

版权

在搜素框里添加放大镜的图标

主要是用到了

border-radius

input[type='text']

text-indent: 30px;
和图标的相对定位

font-awesome一个图标css库 http://fontawesome.io/get-started/

HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>输入框加入图标且显示提示输入内容</title>
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="search_input">
<i class="fa fa-search" id="i-advanced-search-i"></i>
<input type="text" id="i-advanced-search" placeholder="输入关键词检索数据库">
</div>
</body>
</html>

　　CSS代码

	<style type="text/css">
		.search_input input[type='text']{
			display: inline-block;
			width: 250px;
			border-radius: 15px;
			height: 30px;
			text-indent: 30px;
			border: 1px solid ;
		}
		.search_input input[type='text']:focus{
			border: 0px;
			border-color: white;
		}
		.search_input {
			margin-top: 10px;
		}
		.search_input i{
			position: relative;
			left: 30px;// 这里更改图标的位置
			// top: 1px;
			// color: #B2B2B2;//这里可以更改图标的颜色
		}

	</style>

如有疑问，请留言。

转载于:https://www.cnblogs.com/ivanlee-ee-233/p/6778038.html