Question

我有一个像这样的前置输入：

<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）

Answer 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;
}

Answer 2

允许点击输入图标

This fiddle has been tested in IE9+ (should work lower), FF, and 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仍然具有与其他背景颜色容器相对的白色背景（作为小提琴说明。）

更新：如果您不希望图标上的插入阴影

This is the most cross browser friendly way I could find to hide the inset shadow you mentioned in your comment。某些浏览器不会尊重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;
}

Answer 3

我修改了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;
}

Bootstrap：前置输入：前缀元素周围的轮廓

3 个答案:

允许点击输入图标

说明