0
A
回答
1
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>
0
如果你想
<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 🔍"/>
1
根據你的代碼,它看起來像你正在使用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>
2
希望這段代碼將幫助你。
<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>
1
這裏有一種引導方式。使用.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
+0
我的代碼只顯示文本框的一側 – user7397787
+0
如果你按照我提供的例子,它不應該。如果您有不同的元素嵌套,請更新問題以便能夠對其進行處理。 – Chris
相關問題
- 1. primeng大搜索文本框與搜索圖標
- 2. 必應地圖文本框搜索
- 3. 通過文本框搜索圖像
- 4. asp.net中的多重搜索文本框
- 5. 將搜索圖標放在文本框內
- 6. Datagrid文本框搜索C#
- 7. jQuery Datatables搜索文本框
- 8. Wordpress搜索表單 - 用圖標替換「搜索」文本
- 9. 使用jQuery的標籤搜索標籤文本框
- 10. 我如何搜索文本框中的視覺基本文本
- 11. 文本框複製到搜索框
- 12. 將文本框搜索框添加到Apache Isis中的標題/導航欄中
- 13. 搜索欄的文本框覆蓋
- 14. WPF文本框的搜索組件
- 15. 如何在黑莓的編輯文本框中搜索文本?
- 16. Silverlight搜索文本框中的默認文本
- 17. 懸停時顯示指針在搜索文本框中關閉圖標
- 18. 使用搜索框在兩個標籤中搜索標籤
- 19. 搜索框搜索標記(谷歌地圖)
- 20. 如何從搜索文本框清晰的文本搜索完成後在MVC
- 21. 在文本框中顯示搜索圖片
- 22. 如何在ASP中設置圖片搜索文本框.Net
- 23. 搜索欄和搜索顯示文本視圖不居中
- 24. 從地圖編輯文本中搜索標記片段android
- 25. 搜索文本
- 26. 搜索文本文件並在文本框中顯示文本的一部分
- 27. 試圖用Greasemonkey修改Google的搜索文本框
- 28. 如何保持輸入文本字段的搜索圖標與ie8中的文本和圖標不重疊?
- 29. 執行搜索喜歡谷歌搜索文本框
- 30. Bootstrap中的文本框後的圖標
只需通過使它'INPUT TYPE =「搜索
請嘗試在撥弄「'。或者,快速修復= https://jsfiddle.net/6d463wo1/2/ – Abhitalks