去除输入框的边框 bootstrap

Question

我正在使用 bootstrap、less 和 angular 创建一个网站，我整天都在为搜索栏的输入字段而苦苦挣扎。我尝试将 bootstrap input-group 与 input-group-addon 和 input-group-button 一起使用，但我似乎无法删除按钮和输入之间的边框。实际上我根本无法改变边界。关于我如何做到这一点的任何建议。我希望我的搜索框具有与 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，以便保留 bootstrap 样式。我还尝试将此 link http://jsfiddle.net/CbGpP/2/ 中的 html 和 css 放入我的代码中，按钮和输入之间的线仍然保留，点击时它都不会变绿.

Answer 1

如果我猜对了，那么制作 outline: 0 应该可以解决您的问题。

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

编辑：

这里是 Fiddle:

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

在文本字段中添加了 class 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

此问题已在 link Bootstrap: Remove form field border

中回答

基本上你要做的就是将下面的 css 添加到 form-control class

.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

在Bootstrap4中你可以很容易地使用它，如下所示。

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

去除输入框的边框 bootstrap

Remove border from input box bootstrap

html

css

less

twitter-bootstrap

angularjs