web-dev-qa-db-ja.com

bootstrapを使用して、テキストボックスの近くに検索アイコンを配置します

デフォルトでbootstrapを使用しており、列の幅いっぱいにテキストボックスを取得し、テキストボックスの最後に検索アイコンを配置します。

私のコードは次のようなものです。

<div class="container">
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="control-label">Name</label>
            <input id="txtName" class="form-control input-sm" />
            <span class="glyphicon glyphicon-search"></span> 
        </div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>

入力グループを使用したくありません。

Cssを使用した代替方法または代替htmlを提案してください。

htmlcsstwitter-bootstraptwitter-bootstrap-3icons
39
Saurabh Mahajan

以下に3つの異なる方法を示します。

screenshot

3つすべてのFiddleで動作するデモがあります

検証：

ネイティブbootstrap validation states （No Custom CSS！）を使用できます。

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

詳細については、 Bootstrap Glyphiconを入力ボックスに追加する への回答を参照してください。

入力グループ：

.input-group クラスは次のように使用できます。

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

詳細な説明については、 Twitter Bootstrapアイコンを入力ボックスに追加する への回答を参照してください。

スタイルなしの入力グループ：

.input-group/ - を使用して配置することもできますが、デフォルトのスタイル設定をオーバーライドして、2つの要素を別々に表示できます。

通常の入力グループを使用しますが、クラスinput-group-unstyledを追加します。

<div class="input-group input-group-unstyled">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

次に、次のCSSでスタイルを変更します。

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

また、これらのソリューションは 任意の入力サイズ で機能します

108
KyleMit

入力要素に幅90％のクラスを追加し、次のinput-iconクラスをスパンに追加すると、私が思うようになります。

.input { width: 90%; }
.input-icon {
    display: inline-block;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    margin-left: 4px;
}

EDITダンの提案により、クラス名として.inputを使用することは賢明ではなく、より具体的な方法が推奨されます。私はあなたのCSSの一般的なプレースホルダーとして.inputを使用していました

3
Jim
<input type="text" name="whatever" id="funkystyling" />

左の画像のCSSは次のとおりです。

#funkystyling {
    background: white url(/path/to/icon.png) left no-repeat;
    padding-left: 17px;
}

そして、これが右側の画像のCSSです。

#funkystyling {
    background: white url(/path/to/icon.png) right no-repeat;
    padding-right: 17px;
}
2
vishnu ferno

スタイルなしの入力グループを作成する方法についての@KyleMitの答えが好きでしたが、私の場合は、スタイルなしの右側のみが必要でした。だから、私はこれをやった：

css

.input-group.input-group-unstyled-right input.form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

html

<div class="input-group input-group-unstyled-right">
    <span class="input-group-addon">
        <i class="fa fa-envelope-o"></i>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-addon input-group-addon-unstyled">
        <i class="fa fa-check"></i>
    </span>
</div>
1
goat

純粋なCSSで：after疑似要素を使用し、余白を使って創造的にすることができます。

以下に、検索アイコンにFont Awesomeを使用した例を示します。

.search-box-container input {
  padding: 5px 20px 5px 5px;
}

.search-box-container:after {
    content: "\f002";
    font-family: FontAwesome;
    margin-left: -25px;
    margin-right: 25px;
}
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="search-box-container">
  <input type="text" placeholder="Search..."  />
</div>
0
Code Slinger