CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrapless
Ela
Ela

Reputation: 3412

Remove border from input box bootstrap

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.

Upvotes: 5

Views: 43226

Answers (5)

cem kilicli
cem kilicli

Reputation: 81

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/

Upvotes: 8

Anupam Basak
Anupam Basak

Reputation: 1523

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

Upvotes: 8

VIKAS KOHLI
VIKAS KOHLI

Reputation: 8460

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 */
     }

Upvotes: 0

Ela
Ela

Reputation: 3412

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.

Upvotes: 1

shaneparsons
shaneparsons

Reputation: 1639

Setting border:none; should do it.

Upvotes: 1

Related Questions