Tukukkk

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.

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;

}

Setting border:none; should do it.

Being very silly, in the index.html I have added bootstrap stylesheet then my custom one and again bootstrap. Deleting last line solved all my problems.

This question answered in this link Bootstrap: Remove form field border

Basically what you have to do just add the following css to the form-control class

.form-control {

    border: 0;

  }

After this, you will get the input box without border.

OR Also you can do like that

.no-border {

    border: 0;

    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */

     }

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/