QA@IT

Bootstrapで検索コントロール内にアイコン(虫眼鏡)を表示させるには

11555 PV

検索コントロールを角丸で表示させつつ、入力フィールドの右端に検索アイコンを表示させたいのですが、
以下のやり方だと検索アイコンが外に表示されてしまいます。

<form class="form-search">
  <div class="navbar-search">
    <input type="text" class="input-medium search-query" placeholder="Search">
    <span class="add-on"><i class="icon-search></i></span>
  </div>
</form>

次のようにすると、検索コントロールの角丸が小さくなってしまいます。

<form class="form-search">
  <div class="navbar-search">
    <div class="input-append">
      <input type="text" class="input-medium search-query" placeholder="Search">
      <span class="add-on"><i class="icon-search></i></span>
    </div>
  </div>
</form>

何かいい方法はないでしょうか?

回答

http://jsfiddle.net/hYAEQ/1/
こちらにちょうど同じ問題の解決方法がありましたのでお試しあれ。Glyphiconsはiタグ以外でも使えます。

CSS:

.navbar-search {
    position: relative;
}

.navbar-search .search-query {
    padding-left: 29px;
}

.navbar-search .icon-search {
    position: absolute;
    top: 7px;
    left: 11px;
}


.navbar-search .search-query:focus, .navbar-search .search-query.focused {
    padding-left: 30px;
}

HTML:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
    <!-- タイトルとかメニュー -->
      <div class="navbar-search">
        <div class="icon-search"></div>
        <input type="text" class="search-query span3" placeholder="Search">
      </div>
    </div>
  </div>
</div>
編集 履歴 (0)
  • ありがとうございます、うまくいきました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。