找到你要的答案

Q:Add clickable icon with input-group class to textbox

Q:添加可点击的图标和文本框输入组类

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?

我创建了一个文本框和一个提交按钮,以引导输入组的帮助:

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

我想添加在文本框中,点击定位图标,我试图做的许多事情一样,输入组插件添加另一个跨不过的东西的一种创建按钮。我想要的图标在文本框并点击。有人能建议一个方法吗?

answer1: 回答1:

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

添加一个锚定这一类glyphicon然后使其位置:绝对的喜欢下面:

演示

<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;
}
answer2: 回答2:

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>

Anirudh,你好,你可以试试这样的东西不需要额外的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>
answer3: 回答3:
.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>
.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>
answer4: 回答4:
<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. :-)

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

我的客户想要的右边点击搜索glyphicon搜索框和搜索框位于窗口,搜索框比正常(输入组LG),与响应的观点。我是一个可怜的家伙直到我看到AngularJR的回答。:-)

html  css  twitter-bootstrap