Question

我正在使用bootstrap，less和angular创建一个网站，我一整天都在搜索栏的输入字段中苦苦挣扎。我尝试使用带有input-group-addon和input-group-button的bootstrap输入组，但我似乎无法删除按钮和输入之间的边框。实际上我根本无法改变边界。有关如何做到这一点的任何建议。我希望我的搜索框与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

设置border:none;应该这样做。

Answer 3

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

Answer 4

此问题在此链接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 */
     }

Answer 5

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

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

5 个答案: