搜索文本框中的圖標

如何放置文本框搜索文本框中的圖標

<input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span>

工作中搜索圖標fiddle

來源

2017-04-24 user7397787

只需通過使它'INPUT TYPE =「搜索

.input-group .fa-search{ display: table-cell; }

請嘗試在撥弄「'。或者，快速修復= https://jsfiddle.net/6d463wo1/2/ – Abhitalks

CSS：

input { 
    border: 0; 
    background: transparent; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -ms-appearance: none; 
    -o-appearance: none; 
    appearance: none; 
} 
input:focus{ 
    outline: 0; 
} 
.input-placeholder{ 
    background-color: #eee; 
    display: inline-block; 
    padding: 10px; 



}

HTML：

<div class="input-placeholder"> 
    <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><span class="fa fa-search form-control-feedback"></span> 
</div>

這裏的小提琴https://jsfiddle.net/6d463wo1/1/

來源

2017-04-24 10:21:18

如果你想

<input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName &#128269;"/>

來源

2017-04-24 10:21:30

根據你的代碼，它看起來像你正在使用Bootstrap您可以使用此，在bootstrap它提供anoth呃像input-group這樣的方法。您可以使用下面的html代碼爲此

<div class="col-lg-3 col-md-3 col-sm-5 col-xs-5"> 
    <div class="input-group"> 
     <input class="form-control" type="text" name="searchroleName" id="searchroleName" placeholder="Search By RoleName"/><div class="input-group-addon"><span class="fa fa-search form-control-feedback"></span></div> 
    </div> 
</div>

來源

2017-04-24 10:23:34

希望這段代碼將幫助你。

<div class="col-lg-3 col-md-3 col-sm-5 col-xs-5">  
     <div class="input-group"> 
       <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-default"> 
         <span class="glyphicon glyphicon glyphicon-search"></span> 
        </button> 
       </div> 
     </div> 
    </div>

來源

2017-04-24 10:23:48 seven

這裏有一種引導方式。使用.input-group-addon類。

<div class="input-group"> 
    <input type="text" class="form-control" placeholder="Search By RoleName" aria-describedby="basic-addon2"> 
    <span class="input-group-addon fa fa-search" id="basic-addon2"></span> 
</div>

爲了將與輸入欄按鈕內嵌，添加此CSS：here

來源

2017-04-24 10:24:15 Chris

我的代碼只顯示文本框的一側 – user7397787

如果你按照我提供的例子，它不應該。如果您有不同的元素嵌套，請更新問題以便能夠對其進行處理。 – Chris

搜索文本框中的圖標

回答

相關問題