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> 

Answer 1

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!

Answer 2

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/

Answer 3

您可以在此处放置背景图片，例如http://jsfiddle.net/29qoevve/ background: white url(...