Twitter Bootstrapで検索ボックスにアイコンを付ける場合

スポンサードリンク

Twitter Bootstrapでinputボタンにアイコンを付ける方法です。

ちょうどいいものがありましたので

その紹介です。

スポンサードリンク

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

こちらにやり方が載ってました。
Bootstrapで検索コントロール内にアイコン（虫眼鏡）を表示させるには

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>

以上です。

これを使ってinputボタンにもアイコン付けてみようと思って付けたんでけど

アイコン部分が押せなくなったので断念しました。

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

スポンサードリンク