6

次のような先頭に入力があります。

http://jsfiddle.net/swQa4/

<div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input type="text" placeholder="Email" />
</div>

青いアウトライン（フォーカス時に表示）が先頭に追加されたシンボルを囲むようにするにはどうすればよいですか？

編集: github リポジトリの検索フィールドと同様 (例: https://github.com/cloudera/repository-example )

4

3 に答える 3

1

入力要素は:focus疑似セレクターがアタッチされているため、すべてを回避する最も簡単な方法は、青いオーラを表示するサイズに入力要素を拡張することです。

これが意味することは.add-on、入力要素の上に を配置する必要があるということです。

これは、必要以上に Bootstrap に干渉する可能性があるJSFiddleの粗雑な例ですが、これを回避するために CSS を改良できることは明らかです。

私が行ったのは、次を追加することだけです

.input-prepend .add-on{
    /* Move the add-on above the input element */
    position:absolute;

    /* The focus brings the input to z-index 2, so needs to be higher */
    z-index:3;
}

.input-prepend input {
    /* Move the text in the input out from under the add-on */
    padding-left:32px;

    /* Re apply the border radius which we've made look ugly with the add-on on top */
    border-radius:4px;
}

.input-append .add-on, .input-prepend .add-on {
    /* Remove the border, input now takes care of this except from the right one */
    border:0;

    /* Reseparate the add-on from the input */
    border-right:1px solid #ccc;

    /* Account for the 1px gap caused by removing the border */
    margin:1px 0 1px 1px;
}
于 2013-06-16T18:56:30.920 に答える