Search icon in Search field

2020-06-30 02:40发布

站内问答 / HTML/CSS
1775 5 5

how can i place search icon in the search field. This icon is in the front of the search field while search button follows the search bar. something like this-

enter image description here

标签： html css
举报
5条回答
戒情不戒烟
2楼-- · 2020-06-30 03:15

Here's the CSS code that I'd use:

<style>
    #add{
        padding:17px;padding-left:55px;width:300px;border:1px solid #f5f5f5;
        font-size:13px;color:gray;
        background-image:url('http://i47.tinypic.com/r02vbq.png');
        background-repeat:no-repeat;
        background-position:left center;outline:0;
    }
</style>

Note: I added a lot of extra codes to make the search box look better, the necessary code to make the search box apear is padding-left, background-image:url, background-repeat and background-position. Replace "http://i47.tinypic.com/r02vbq.png" with whatever search icon you want.

It's also important to know that now in HTML5, most browsers render

<input type="search" results>

with a search icon. The input type search makes it a search box, with a "x" button to clear, and adding "results" also displays a search box. Of course you could also add an x button with CSS and JavaScript to a regular search box. It's also important to note that input type search allows very little styling. Demo on Safari on a Mac:

Demoenter image description here

i Hope it works out for you.

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
3楼-- · 2020-06-30 03:25

Use below code usonh bootstrap css. This code easily implement in your page.

Use Bootstrap and there is default icon file i which used tag .

I f you want different icon then you can use here.

HTML Code:-

 <div class="col-xs-6" >
   <div class="right-inner-addon">
     <i class="icon-search"></i>
     <input type="search" class="form-control" placeholder="Search" />
   </div>
 </div>

CSS :-

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2020-06-30 03:25

Its an simple and small example without any wrapper of divs, single element that is input type with icon on the left.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    background-color: none;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    outline: none;
}

</style>
</head>
<body>
<form>
  <input type="text" name="search" placeholder="Search by list name">
</form>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
狗以群分
5楼-- · 2020-06-30 03:28 
 input{    
background: url("http://kodyrabatowe.wp.pl/img/ico/search_gr.png") top left     no-repeat;
height:30px;
padding-left:25px;   
}
//////////////////////////
<!-- html code -->
<input type="text" name="txtBox" >
查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
6楼-- · 2020-06-30 03:35

Checkout this code fiddle to get an idea of how it can be accomplished:

<div id="input_container">
    <input type="text" id="input" value="search">
    <img src="URL" id="input_img">
</div>

#input_container { position:relative; padding:0; margin:0; }
#input { height:20px; margin:0; padding-left: 30px; }

#input_img { position:absolute; bottom:12px; left:180px; width:10px; height:10px; }

http://codepen.io/anon/pen/GoXKyg

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)