Html 从输入框引导程序中删除边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28329803/
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
Remove border from input box bootstrap
提问by Ela
I am creating a website using bootstrap, less and angular and I've been struggling all day with the input field for search bar. I tried using the bootstrap input-group with both input-group-addon and input-group-button but I cannot seem to be able to remove the border between the button and the input. Actually I cannot change the border at all. Any suggestions on how I could do this. I would like my search box have the same behaviour as in duckduckgo.
我正在使用 bootstrap、less 和 angular 创建一个网站，我整天都在为搜索栏的输入字段苦苦挣扎。我尝试将 bootstrap input-group 与 input-group-addon 和 input-group-button 一起使用，但我似乎无法删除按钮和输入之间的边框。实际上我根本无法改变边界。关于我如何做到这一点的任何建议。我希望我的搜索框具有与duckduckgo相同的行为。
UPDATE:
更新：
<form role="form" action="results.html" style="padding:30px">
<p class="input-group">
<input type="text" class="form-control" name="q" /> <span class="input-group-addon" style="border-left-width: 0px"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="hidden" name="mode" value="web" />
</p>
So this is my code. I don't know how to make a JSFiddle with it so that the bootstrap styling is preserved. I have also tried putting the html and css from this link http://jsfiddle.net/CbGpP/2/into my code and the line between the button and input is still preserved, neither it turns green on click.
所以这是我的代码。我不知道如何用它制作 JSFiddle，以便保留引导程序样式。我还尝试将此链接http://jsfiddle.net/CbGpP/2/ 中的 html 和 css放入我的代码中，并且按钮和输入之间的线仍然保留，单击时也不会变为绿色。
采纳答案by Ela
Being very silly, in the index.html I have added bootstrap stylesheet then my custom one and again bootstrap. Deleting last line solved all my problems.
非常愚蠢，在 index.html 中，我添加了引导程序样式表，然后是自定义的引导程序。删除最后一行解决了我所有的问题。
回答by Anupam Basak
If I got you right then making outline: 0should solve your problem.
如果我猜对了，那么制作outline: 0应该可以解决您的问题。
If I got it wrong, please post some pictures so that we can see your actual problem and also post the codes of what you've tried till now.
如果我弄错了，请张贴一些图片，以便我们可以看到您的实际问题，并张贴到目前为止您尝试过的代码。
EDIT:
编辑：
Here is the Fiddle:
这是小提琴：
Basically, you need to remove the right border of the text field, left border of the icon and background color of the icon.
基本上，您需要删除文本字段的右边框、图标的左边框和图标的背景颜色。
Added a class search-inputto the text field and search-iconto the icon.
search-input向文本字段和search-icon图标添加了一个类。
Here is the CSS:
这是CSS：
.search-input {
border-right: 0;
}
.search-icon {
border-left:0 solid transparent;
background:transparent;
}
回答by cem kilicli
In Bootstrap 4 you can easily use it as below.
在 Bootstrap 4 中，您可以轻松地使用它，如下所示。
<span class="border-0"></span>
In Your case
在你的情况下
<form role="form" action="results.html" style="padding:30px">
<p class="input-group">
<input type="text" class="form-control border-0" name="q" /> <span class="input-group-addon" style="border-left-width: 0px"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="hidden" name="mode" value="web" />
</p>
Official Documentation https://getbootstrap.com/docs/4.1/utilities/borders/
回答by shaneparsons
Setting border:none;should do it.
设置border:none;应该这样做。
回答by VIKAS KOHLI
This question answered in this link Bootstrap: Remove form field border
这个问题在这个链接中回答了Bootstrap: Remove form field border
Basically what you have to do just add the following css to the form-control class
基本上你要做的只是将以下 css 添加到 form-control 类
.form-control {
border: 0;
}
After this, you will get the input box without border.
之后，您将获得没有边框的输入框。
OR Also you can do like that
或者你也可以这样做
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
