Align search icon inside of input field?

Question

How can I align a search icon within an input field (floating in the center on the right side)? I looked around and found some stuff about using it as a background image, not sure how to do this though.

.search {
 border: #cccccc solid;
 border-width:2px;
 padding:9px;
 font-size:24pt;
 border-radius:10px;
 margin:0; 
 padding-left:30px;
 height:54px
}
.search:focus {
 outline:none;
}
#search {
 position:relative; 
 padding:0; 
 margin:0;
}
#srch_icon {
 height:32px;
 width:32px;
}

<div id="search">
 <input type='text' class='search left'>
 <img src="search.png" id="srch_icon">
</div>

possible duplicate of [Put icon inside input element in a form](http://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form) — 4dgaurav, Feb 23 '15 at 04:46

score 2 · Accepted Answer · answered Feb 23 '15 at 04:41

2

I would use a background image for sure:

#search input {
    background-image: url('search.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right center;
}

Hope this helps!

answered Feb 23 '15 at 04:41

kiaaanabal

366
2
12

score 0 · Answer 2 · answered Feb 23 '15 at 04:47

You can position an image with CSS using only background property.

background: color position/size repeat origin clip attachment image|initial|inherit;

in your case:

background: url(search.png) right center no-repeat;

See: http://jsfiddle.net/arglab/dgy79e8y/1/

By the way, I think this will look better: http://jsfiddle.net/arglab/dgy79e8y/

score 0 · Answer 3 · answered Feb 23 '15 at 04:49

0

You can put a background image here is a example http://jsfiddle.net/29qoevve/ background: white url(...

answered Feb 23 '15 at 04:49

marjes

172
15

Align search icon inside of input field?

3 Answers3