從輸入框引導程序中刪除邊框

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添加了search-input圖標。

這是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：刪除表單字段邊框

基本上你只需要將以下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/