CODEWITHSUNDEEP
jquerytwitter-bootstrap
lalith458
lalith458

Reputation: 695

How to add the search and clear icons in the bootstrap search box

In my project i need to include the search and clear icons in the bootstrap search box like in the below image

enter image description here

Can anyone tell me how to fix it

Upvotes: 3

Views: 9574

Answers (3)

Jonathan E. Landrum
Jonathan E. Landrum

Reputation: 3172

If you add the jQuery Mobile js file to your page, you can simply add

type="search"

and 

data-clear-btn="true"

to the element and they will appear automatically.

Upvotes: 1

HTTP
HTTP

Reputation: 1724

I think you can do this.

<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-search"></span>
  <input type="text" class="form-control">
  <span class="input-group-addon glyphicon glyphicon-remove-circle"></span>
</div>

See the output here

Upvotes: 2

Will
Will

Reputation: 4155

There are a few ways to do it but one simple way is to create three elements within one relatively positioned parent. You'll need to fudge this a bit but it should get you going.

HTML:

<div class="wrap">
    <input type="text" placeholder="Search YouTube" class="form-control">
    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

CSS:

.wrap{
    position: relative;
}
.wrap span{
    position: absolute;
    top: 4px;
    left: 3px;
}
.wrap .glyphicon-remove-circle {
    left: auto;
    right: 3px;
}

Upvotes: 1

Related Questions