How do I create a rounded search bar in Bootstrap 3? - css

Question

I have an issue creating a rounded search bar using Bootstrap 3.
I've tried using class="search-query" and also using
the following example:
HTML:
<div style="padding:20px;">
<form class="form-search form-inline">
<input type="text" class="search-query" placeholder="Search..." />
</form>
</div>
CSS:
input.search-query {
padding-left:26px;
}
form.form-search {
position: relative;
}
form.form-search:before {
content:'';
display: block;
width: 14px;
height: 14px;
background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
background-position: -48px 0;
position: absolute;
top:8px;
left:8px;
opacity: .5;
z-index: 1000;
}
http://jsfiddle.net/qdGZy/
Unfortunately, nothing helps.
I need to make a search bar as the attached image.
I'm sure it can be done via Bootstrap 3 instead of
usign manual html5/css but I don't know how.
I'm using the CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Can you please help me ? :)

Answer 1

Didn't manage to replicate exactly what you wanted, but I think is close enough.
Referred to Bootstrap Form Control Validation State for inspiration.
P/S: If you want to fine tune the style, I think you can try to adjust padding of .input-group-addon or #inputGroupSuccess1.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon" style="background-color:#FFFFFF;"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" id="inputGroupSuccess1" placeholder="Search..." style="border-left: 0px;">
</div>
</div>
Hope this helps.

Answer 2

In your CSS, set:
form-query {
border-radius: 33px;
}

Answer 3

I know this question is a little old but perhaps some one will still find this useful.
The following bootstrap code will work:
HTML
<div class="input-group">
<input type="text" class="form-control search-form"
placeholder="Search">
<span class="input-group-btn">
<button type="submit"
class="btn search-btn" data-target="#search-form"
name="q">
<i class="fa fa-search"><!--FONT AWESOME font #
"http://fortawesome.github.io/Font-Awesome/" --></i>
</button>
</span>
</div>
CSS
.search-form {
border-radius: 30px 0px 0px 30px;
/*border-radius: Top-left, Top-right, Bottom-right, Bottom-left;*/
}
.search-btn {
border-radius: 0px 30px 30px 0px;
cursor:pointer;
background-color: white;
}
See Source [http://jsfiddle.net/blayderunner123/C5Eq7/][1]
Note: this requires Font awesome.
As you see, a little custom CSS is still required, but all it really is is adding a border-radius to achieve the rounding
The .search-btn containing the font awesome search icon looks just like it is a part of the actual input element by making it white and also giving it a border-radius

Answer 4

Use the following code:
<input type="text" class="form-control" placeholder="Search" />
Refer demo.