CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 41

Align search icon inside of input field?

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>

Upvotes: 0

Views: 3540

Answers (3)

marjes
marjes

Reputation: 172

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

Upvotes: 0

agustin
agustin

Reputation: 2387

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/

Upvotes: 0

kiaaanabal
kiaaanabal

Reputation: 384

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!

Upvotes: 2

Related Questions