从输入框引导程序中删除边框

Question

我正在使用 bootstrap、less 和 angular 创建一个网站，我整天都在为搜索栏的输入字段苦苦挣扎。我尝试将引导输入组与输入组插件和输入组按钮一起使用，但我似乎无法删除按钮和输入之间的边框。实际上我根本无法更改边界。关于我如何做到这一点的任何建议。我希望我的搜索框具有与 duckduckgo 相同的行为。

更新：

<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>

这是我的代码。我不知道如何用它制作 JSFiddle，以便保留引导样式。我还尝试将此链接 http://jsfiddle.net/CbGpP/2/ 中的 html 和 css 放入我的代码中，并且按钮和输入之间的线仍然保留，点击时它也不会变成绿色。

Answer 1

如果我没听错，那么制作outline: 0 应该可以解决您的问题。

如果我弄错了，请发布一些图片，以便我们可以看到您的实际问题，并发布您到目前为止尝试过的代码。

编辑：

这里是Fiddle：

基本上，你需要去掉文本字段的右边框、图标的左边框和图标的背景颜色。

在文本字段中添加了一个类search-input，在图标中添加了search-icon。

这是 CSS：

.search-input {
    border-right: 0;
}

.search-icon {
    border-left:0 solid transparent;
    background:transparent;
}

Answer 2

在 Bootstrap 4 中，您可以轻松地使用它，如下所示。

<span class="border-0"></span>

你的情况

<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>

官方文档 https://getbootstrap.com/docs/4.1/utilities/borders/

Answer 3

设置border:none; 应该可以。

Answer 4

非常愚蠢，我在 index.html 中添加了引导样式表，然后添加了我的自定义引导程序。删除最后一行解决了我所有的问题。

Answer 5

此问题已在此链接Bootstrap: Remove form field border中回答

基本上你要做的只是将以下css添加到表单控件类

.form-control {
    border: 0;
  }

之后，你会得到没有边框的输入框。

或者你也可以这样做

.no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
     }