How do I move the magnifying glass to the right hand side in my input field?
Here's my Fiddle.
HTML:
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS:
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body { margin: 30px; }
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input { text-indent: 32px;}
.search .fa-search {
position: absolute;
top: 10px;
left: 10px;
}
You set left: 10px to an icon too. Set there more pixels from left side, or directly pixels from right.
.search .fa-search {left: 230px;}
http://jsfiddle.net/xhjLyf1k/1/
Setting right position instead of the left one (to prevent resizing of input field):
.search {display: inline-block} /* prevent 100% width */
.search .fa-search {left: auto; right: 10px;}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments