Remove border from initial loading box

Question

I am building a website using bootstrap, less and angular, and I have been struggling to use the input field for the search bar. I tried using the bootstrap input group using the input-group-addon button and the input-group button, but it seems like I cannot remove the border between the button and the input. Actually, I cannot change the border at all. Any suggestions on how I can do this. I would like my search field to have the same behavior as 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 do not know how to make JSFiddle with it so that the bootstrap style is preserved. I also tried putting the html and css from this http://jsfiddle.net/CbGpP/2/ link into my code, and the line between the button and the input is still saved, nor does it turn green on click.

Answer 1

Being very stupid, in index.html I added a loading stylesheet and then my own and loading again. Removing the last line solved all my problems.

Answer 2

If I understood you, then outline: 0 should solve your problem.

If I am mistaken, send some photos so that we can see your actual problem, and also publish codes of what you tried so far.

EDIT:

Here is the script: http://jsfiddle.net/f257xosu/

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

Added search-input class to text box and search-icon to icon.

Here is the CSS:

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

Answer 3

Setting border:none; gotta do it.

Answer 4

This question answered this Bootstrap link : remove form field border

Basically what you need to do is just add the following css to the form management class

 .form-control { border: 0; } 

After that, you will get an input box without a frame.

OR Also you can do it

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