从输入框中移除边框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样式。我还尝试将此链接http://jsfiddle.net/CbGpP/2/中的HTML和CSS放入我的代码中，但按钮和输入之间的线仍然保留，而且点击后也不会变绿。

- Ela

---

请通过http://jsfiddle.net/分享你的代码，这样我们就能在线查看你的代码。 - Okan Kocyigit

Answer 1

如果我理解正确，那么将outline: 0设置应该可以解决您的问题。

如果我理解错误，请发布一些图片，以便我们看到您的实际问题，并发布您迄今为止尝试过的代码。

编辑：

这是Fiddle：

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

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

这是CSS：

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

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

- Anupam Basak

---

在浏览器（Chrome）中将元素的描边样式设置为0并没有改变任何东西。 - Ela

图像 这是我的页面上 jsfiddle 和我的代码的样子。 - Ela

修改了我的回答。现在请检查一下。希望能有所帮助。 :) - Anupam Basak

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/

这是Bootstrap的边框实用工具页面。您可以使用这些类来添加或删除元素的边框，并控制其样式。这些实用工具能够帮助您快速轻松地修改界面的外观，使其更加美观。

- cem kilicli

Answer 3

设置 border:none; 就可以了。

- shaneparsons

---

无论我使用border:none;还是outline:0;似乎都被覆盖了。而且我不明白为什么从JsFiddle复制代码不起作用，属性似乎又被某些东西覆盖了。 - Ela

这是您的 jsFiddle（http://jsfiddle.net/CbGpP/58/）的更新、可用版本。它还不完美，但已经朝着正确的方向前进了。 - shaneparsons

抱歉，无法编辑之前的评论，这是正确的链接：（http://jsfiddle.net/CbGpP/61/） - shaneparsons

Answer 4

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

- Ela

Answer 5

这个问题在这个链接中得到了解答 Bootstrap：删除表单字段边框

基本上你只需要将以下CSS添加到form-control类中即可

.form-control {
    border: 0;
  }

接下来，您将获得没有边框的输入框。

或者您也可以这样做

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

- VIKAS KOHLI

---

在盒子阴影上加1。我短暂地忽略了这一点。经过深度缩放，阴影的渐变变得可见。如果不进行缩放，阴影看起来就像普通的灰色边框。 - Nrzonline