在搜素框里添加放大鏡的圖標
主要是用到了
- 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>
如有疑問，請留言。