Anirudh
Anirudh

Reputation: 21

Add clickable icon with input-group class to textbox

I have created a Textbox and a submit button with the help of input-group in Bootstrap:

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

I want to add an icon for geolocation in the textbox which is clickable, I tried to do many things like adding another span with input-group-addon but that's creating a button kind of thing. I want the icon to be inside the textbox and make it clickable. Can anybody suggest a way to do it?

Upvotes: 2

Views: 12484

Answers (4)

Thomas David Kehoe
Thomas David Kehoe

Reputation: 10930

<div class="row">
    <div class="col-sm-2 col-md-2 col-lg-2"></div>

    <form ng-submit="search(searchterm)">
      <div class="form-group">
        <div class="input-group input-group-lg col-sm-8 col-md-8 col-lg-8 col-centered">
          <input type="text" class="form-control" ng-model="searchterm">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </div>
    </form>

    <div class="col-sm-2 col-md-2 col-lg-2"></div>
  </div> <!-- end row -->

My client wanted a search box with a clickable search glyphicon on the right, and the search box centered in the window, the search box bigger than normal (input-group-lg), with responsive views. I was a miserable wretch until I saw AngularJR's answer. :-)

Upvotes: 1

AngularJR
AngularJR

Reputation: 2762

Anirudh, Hi there, You could probably try something like this without all the extra css.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <a href="#" onclick="alert('clicked');" ></a>
    <div class="input-group-addon glyphicon glyphicon-map-marker btn"></div>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

Upvotes: 1

Sam
Sam

Reputation: 11

.input-group abbr{
    font-size: 23px;

    position: absolute;
    right: 16%;
    top: 6px;
    z-index: 500;
}

<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
    <input type="text" class="form-control">enter code here
    <abbr><a href="#"><i class="fa fa-map-marker"></i></a></abbr>

    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>
</div>

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Add an anchor set it a class of glyphicon and then make its position:absolute like one below:

DEMO

<div class="input-group input-group-lg col-lg-6 col-centered">
    <a href="#" onclick="alert('clicked');" class="glyphicon glyphicon-map-marker"></a>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            Search
        </button>
    </span>
</div>

CSS

.glyphicon-map-marker{
    position:absolute;
    z-index:1000;
    top:30%;
    left:2%;
}
a.glyphicon-map-marker
{
     text-decoration: none !important;
}

Upvotes: 5

Related Questions