twitter-bootstrap 文本框内的搜索图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43585417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Search Icon inside text box
提问by user7397787
回答by seven
Hope this code snippet will help you.
希望这个代码片段能帮到你。
<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>
回答by Kristijan Iliev
There's a bootstrap way for this. Use the .input-group-addonclass.
有一个引导方法。使用.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>
In order to place the button inline with the input field, add this css:
为了将按钮与输入字段内联，请添加以下 css：
.input-group .fa-search{
display: table-cell;
}
Please try it in the fiddle here
请在此处的小提琴中尝试
回答by Andrei Todorut
CSS:
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:
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>
Here's the fiddle https://jsfiddle.net/6d463wo1/1/
回答by Super User
As per your code it looks like you are using Bootstrap, in bootstrapit provide another method like input-group. You can use following html code for this
根据您的代码，您似乎正在使用Bootstrap，bootstrap其中提供了另一种方法，例如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>
回答by Sagar Kodte
You can use this if you want
如果你愿意，你可以使用它
<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 🔍"/>回答by Aditya Parmar
<!DOCTYPE ht`enter code here`ml>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
.club input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid black;
border-right: 0px solid black;
float: left;
width: 90%;
}
.club button {
float: left;
width: 10%;
padding: 10px;
background:white;
color: black;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="club">
<input type="text" placeholder="Search.." name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
<div>
</body>
</html>
