在搜素框里添加放大镜的图标
主要是用到了
- 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; 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>
如有疑问,请留言。