Remove border from input box bootstrap

Question

I am creating a website using bootstrap, less and angular and I've been struggling all day with the input field for search bar. I tried using the bootstrap input-group with both input-group-addon and input-group-button but I cannot seem to be able to remove the border between the button and the input. Actually I cannot change the border at all. Any suggestions on how I could do this. I would like my search box have the same behaviour as in duckduckgo.

UPDATE:

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

So this is my code. I don't know how to make a JSFiddle with it so that the bootstrap styling is preserved. I have also tried putting the html and css from this link http://jsfiddle.net/CbGpP/2/ into my code and the line between the button and input is still preserved, neither it turns green on click.

Answer 1

If I got you right then making outline: 0 should solve your problem.

If I got it wrong, please post some pictures so that we can see your actual problem and also post the codes of what you've tried till now.

EDIT:

Here is the Fiddle:

Basically, you need to remove the right border of the text field, left border of the icon and background color of the icon.

Added a class search-input to the text field and search-icon to the icon.

Here is the CSS:

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

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

Answer 2

In Bootstrap 4 you can easily use it as below.

<span class="border-0"></span>

In Your case

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

Official Documentation https://getbootstrap.com/docs/4.1/utilities/borders/

Answer 3

Setting border:none; should do it.