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

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应该解决你的问题.

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

编辑:

这是小提琴:

基本上,您需要删除文本字段的右边框,图标的左边框和图标的背景颜色.

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

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