CSS將圖標移動到輸入字段的右側

Question

如何將放大鏡移動到輸入字段的右側？

這是我的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; 
} 

Answer 1

您設置left: 10px的圖標了。從左側設置更多像素，或從右側設置直接像素。

.search .fa-search {left: 230px;} 

http://jsfiddle.net/xhjLyf1k/1/

設置正確的位置，而不是左側一個（以防止輸入字段的大小調整）：

.search {display: inline-block} /* prevent 100% width */ 
.search .fa-search {left: auto; right: 10px;} 

http://jsfiddle.net/xhjLyf1k/2/