CSS 带有图标的搜索输入 Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45696685/
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 input with an icon Bootstrap 4
提问by Retros
No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon?
不知道我该怎么做，因为 BS 4 不支持字形。我是将它设置为背景还是将不同的定位应用于字体真棒图标？
This is my code so far:
到目前为止，这是我的代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group col-md-4">
<input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->I want to use this font-awesome icon. And I've tried adding it as a background-imagetoo, as in:
我想使用这个字体很棒的图标。我也尝试将其添加为 a background-image，如下所示：
.form-control {
background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
background-position: right center 5px;
}
But that doesn't do anything. The only way I can think of is to add font-awesome icon and then set the positioning to absolute, right? But I'm not sure if that's the 'clean' and correct way to do it? Do I need to take a different approach to this? Someone help! Thank you!
但这没有任何作用。我能想到的唯一方法是添加font-awesome图标，然后将定位设置为绝对，对吗？但我不确定这是否是“干净”和正确的方法？我需要对此采取不同的方法吗？有人帮忙！谢谢！
回答by Zim
Update 2019
2019 年更新
Why not use an input-group?
为什么不使用输入组？
<div class="input-group col-md-4">
<input class="form-control py-2" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
And, you can make it appear insidethe input using the border utils...
并且，您可以使用边框实用程序使其出现在输入中...
<div class="input-group col-md-4">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
Or, using a input-group-textw/o the gray background so the icon appears inside the input...
或者，使用不input-group-text带灰色背景的图标，这样图标就会出现在输入中...
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
<span class="input-group-append">
<div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
</span>
</div>
Alternately, you can use the grid (row>col-) with no gutter spacing:
或者，您可以使用没有装订线间距的网格 ( row> col-)：
<div class="row no-gutters">
<div class="col">
<input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
</div>
<div class="col-auto">
<button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Or, prependthe icon like this...
或者，像这样添加图标...
<div class="input-group">
<span class="input-group-prepend">
<div class="input-group-text bg-transparent border-right-0">
<i class="fa fa-search"></i>
</div>
</span>
<input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
Search
</button>
</span>
</div>
Demo of all Bootstrap 4 icon input options
回答by Rosdi Kasim
I made another variant with dropdown menu(perhaps for advanced search etc).. Here is how it looks like:
我制作了另一个带有下拉菜单的变体（可能用于高级搜索等）。这是它的样子：
<div class="input-group my-4 col-6 mx-auto">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
<span class="input-group-append">
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<button class="btn btn-outline-primary rounded-right" type="button">
<i class="fas fa-search"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</span>
</div>
Note: It appears green in the screenshot because my site main theme is green.
注意：它在屏幕截图中显示为绿色，因为我的站点主题是绿色的。
回答by Aniruddha Das
回答by Patricio Moraga
in ASPX bootstrap v4.0.0, no beta (dl 21-01-2018)
在 ASPX 引导程序 v4.0.0 中，没有测试版 (dl 21-01-2018)
<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
<i class="ICON-copyright"></i>
</asp:LinkButton>
</div>
回答by zeros-and-ones
Here is an input box with a search icon on the right.
这是一个带有右侧搜索图标的输入框。
<div class="input-group">
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
<div class="input-group-append">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
</div>
Here is an input box with a search icon on the left.
这是一个输入框，左侧有一个搜索图标。
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
</div>
<input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
</div>
回答by Derrick Miller
Here's a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning.
这是通过将放大镜图标和输入字段包含在具有相对定位的 div 中来实现它的一种相当简单的方法。
Absolute positioning is applied to the icon, which takes it out of the normal document layout flow. The icon is then positioned inside the input. Left padding is applied to the input so that the user's input appears to the right of the icon.
绝对定位应用于图标，使其脱离正常的文档布局流程。然后将图标定位在输入内。左填充应用于输入，以便用户的输入显示在图标的右侧。
Note that this example places the magnifying glass icon on the left instead of the right. This is recommended when using <input type="search">as Chrome adds an X button in the right side of the searchbox. If we placed the icon there it would overlay the X button and look fugly.
请注意，此示例将放大镜图标放在左侧而不是右侧。当<input type="search">Chrome 在搜索框的右侧添加一个 X 按钮时，建议使用此选项。如果我们把图标放在那里，它会覆盖 X 按钮，看起来很丑。
Here is the needed Bootstrap markup.
这是所需的 Bootstrap 标记。
<div class="position-relative">
<i class="fa fa-search position-absolute"></i>
<input class="form-control" type="search">
</div>
...and a couple CSS classes for the things which I couldn't do with Bootstrap classes:
...还有一些 CSS 类，用于我无法使用 Bootstrap 类做的事情：
i {
font-size: 1rem;
color: #333;
top: .75rem;
left: .75rem
}
input {
padding-left: 2.5rem;
}
You may have to fiddle with the values for top, left, and padding-left.
您可能需要摆弄 top、left 和 padding-left 的值。
