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 repos 的搜索字段（例如https://github.com/cloudera/repository-example）

4

3 回答 3

1

输入元素是:focus附加了伪选择器的元素，因此最简单的方法是将输入元素扩展到您希望蓝色光环显示的大小。

这意味着您必须将.add-on放置在输入元素的顶部。

这是JSFiddle上的一个粗略示例，它可能会比您想要的稍微多一点地干扰 Bootstrap，但显然可以改进 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 回答
1

允许点击图标输入

这个小提琴已经在 IE9+（应该工作得更低）、FF 和 Chrome 中进行了测试。与z-index此处其他一些答案的解决方案不同，它允许单击图标以进行输入。它的工作原理实际上非常简单。

.input-prepend {
    border-radius: 4px;
    background: white;
}
.input-prepend .add-on {
    margin-right: -28px;
}

.input-prepend input {
    border-radius: 4px;
    background: none;
    padding-left: 34px; /*28 for icon, 6 for normal padding*/
}

解释

图标的负右边距会导致input重叠。输入已经被border-radius再次给出，但它background被设置为none以便可以看到图标。添加了额外的右侧填充input以容纳图标。最后，还给出了包装器border-radius并将最终background颜色应用于包装器，以便在input其他一些背景色容器（如小提琴所示）上仍然具有白色背景。

更新：如果你不想要图标上的嵌入阴影

这是我能找到的最适合跨浏览器的方式来隐藏您在评论中提到的嵌入阴影。一些浏览器不pointer-events支持，因此图标区域的一小部分不会被识别为触发输入。

.input-prepend:before,
.input-prepend:after{
    content: '';
    display: block;
    top: 1px;
    left: 1px;
    width: 24px;
    height: 4px;
    border-radius: 4px 0 0 0; 
    border: 2px solid #eee; /* match icon background */
    border-width: 2px 0px 0px 2px;
    position: absolute;
    z-index: 2;
    pointer-events: none; /* for those browsers that honor */
}
.input-prepend:before {
    width: 4px;
    height: 24px;
    top: 4px;
    border-radius: 0 0 0 4px;
}
于 2013-06-16T19:12:20.717 回答
0

我修改了 Ben Swinburne 找到的解决方案，使其适用于前置和附加字段：

http://jsfiddle.net/WBJ6H/

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

CSS：

.input-prepend-inner .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-inner input[type=text]
{
    /* 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.
       The styling is applied specifically to top-left / bottom-left
       to allow .input-append to overwrite the right border-radius side. */
    -webkit-border-top-left-radius: 4px;
    -moz-border-top-left-radius: 4px;
    border-top-left-radius: 4px;

    -webkit-border-bottom-left-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.input-prepend-inner .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 rgb(204, 204, 204);

    /* Account for the 1px gap caused by removing the border */
    margin: 1px 0 1px 1px;
}
于 2013-06-17T07:11:21.233 回答