1、搜索框+放大镜：这里font-awesome.css需要我们自行下载添加，具体样式实现如下
<!DOCTYPE html>
<html>
<head>
<title>输入框加入图标且显示提示输入内容</title>
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<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: 15px;
border-color: red;
} -->
.search_input {
margin-top: 100px;
}
.search_input i{
position: relative;
left: 30px; // 这里更改图标的位置
// top: 1px;
color: #B2B2B2;//这里可以更改图标的颜色
}
</style>
</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>2、百度实现样式
4579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
