Bootstrap 将焦点和验证状态添加到 input-group-addon，而不仅仅是输入

Question

在 Bootstrap 中，当您 :focus 输入时，它会添加一个蓝色边框和框阴影来指示焦点。

对于验证状态（错误、警告、成功），它分别为输入添加红色、黄色和绿色边框。

但是，如果您在输入字段中放置了一个 input-group-addon，则该插件不会聚焦。创建一个有点奇怪的效果：

如何将焦点添加到插件？

Answer 1

不幸的是，我想不出没有 javascript 的方法。但这里有一个解决方案。

添加这个 CSS：

.input-group-focus {
  border-radius:4px;
  -webkit-transition: box-shadow ease-in-out .15s;
          transition: box-shadow ease-in-out .15s;
}
.input-group-addon {
  -webkit-transition: border-color ease-in-out .15s;
          transition: border-color ease-in-out .15s;
}
.input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;  
}
.has-error.input-group.input-group-focus,
.has-error .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483 !important;
}
.has-warning.input-group.input-group-focus,
.has-warning .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168 !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168 !important;
}
.has-success .input-group.input-group-focus,
.has-success .input-group.input-group-focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b !important;
}
.input-group-focus input:focus {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.input-group-focus .input-group-addon {
  border-color: #66afe9 !important;
}
.has-error .input-group-addon {
  border-color: #843534 !important;
}
.has-success .input-group-addon {
  border-color: #2b542c !important;
}
.has-warning .input-group-addon {
  border-color: #66512c !important;
}

!important 可能对您的实施是必要的，也可能不是，所以我决定将它们留在那里。我不认为有什么事情比你的专注状态更重要，所以应该没问题。

还有 JS（使用 jQuery）：

$(document).ready(function() {
    $(".input-group > input").focus(function(e){
        $(this).parent().addClass("input-group-focus");
    }).blur(function(e){
        $(this).parent().removeClass("input-group-focus");
    });
});

无论您将验证状态添加到 .input-group 父级还是 .form-group 父级，这都会起作用。

产生的效果：

Answer 2

我现在不太喜欢在最好的时候使用 JQuery，并且发现 javascript 解决方案可能变得难以支持（很高兴得到纠正:)

根据我们对 CSS 的了解，+ 运算符将规则应用于下一个子选择器，或者我们可以使用 ~ 定位任何子选择器。 （没有父选择器很烦人）

考虑到这一点，我的解决方案（仅使用 Chrome 进行测试，而不使用 .form-group 上的 .has-errors 等状态进行测试）是覆盖 .input-group 块的修改副本，嵌套在其中.

基本块类似于：

<div class="form-group">
    <label class="control-label">Input with addons</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" placeholder="placeholder text">
            <div class="input-group-addon">.00</div>
        </div>
    <span class="help-block">Help block</span>
</div>

修改/复制块（在上面代码中的输入字段之后添加/插入）：

<div class="input-group-overlay">
    <div class="input-group-addon">$</div>
    <span class="form-control"></span>
    <div class="input-group-addon">.00</div>
</div>

完整的块现在看起来像：

<div class="form-group">
    <label class="control-label">Input with addons</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" placeholder="placeholder text">
            <div class="input-group-overlay">
                <div class="input-group-addon">$</div>
                <span class="form-control"></span>
                <div class="input-group-addon">.00</div>
            </div>
            <div class="input-group-addon">.00</div>
        </div>
    <span class="help-block">Help block</span>
</div>

如果有附加元素，则该块需要放在最后一个 input-group-addon 之前，否则将不会应用右上角和右下角的半径角。我还在下面的 CSS 中使用+ 作为运算符，它希望它是下一个元素。

现在是 CSS：

input:focus + .input-group-overlay .input-group-addon {
  border-color: #66afe9;
}

.input-group-overlay {
  position: absolute;
  display: inherit;
  z-index: 1;
  top: 0;
  left: 0;
}

这会将边框应用于与父元素重叠的子输入插件。

如顶部所述，这仅在 Chrome 中进行了测试，跨度 .form-group 的 z-index 可能需要在其他浏览器中进行一些调整。

添加了反弹，您还可以删除输入的左右边框并更改插件的背景颜色，使其看起来像输入本身的一部分。

.input-group .form-control {
  border-left: 0;
  border-right: 0;
}

.input-group-addon {
  background: #fff;
}

Answer 3

如上所示，我的解决方案（使用 Bootstrap 4）是用绝对定位和 z-index 将 input-group-addon 重叠在 input 之上。我在input 中添加了一些正确的填充，以便为插件腾出空间。这是我的 SCSS 和标记：

.input-group.input-group-seamless-append {
    > input {
        width: 100%;
        padding-right: 52px;
    }
    > .input-group-append {
        position: absolute;
        right: 1px;
        top: 1px;
        bottom: 1px;
        z-index: 4;
    }
}

<div class="input-group input-group-seamless-append">
    <input autocomplete="off" class="form-control rounded"
        aria-describedby="button-addon"
        [attr.type]="showPassword ? 'text' : 'password'">
    <div class="input-group-append">
        <button type="button" id="button-addon"
            class="btn btn-light shadow-none border-0 bg-transparent text-primary">
            <i class="fa fa-eye" *ngIf="showPassword"
                (click)="showPassword = !showPassword"></i>
            <i class="fa fa-eye-slash" *ngIf="!showPassword"
                (click)="showPassword = !showPassword"></i>
        </button>
    </div>
</div>

你可以看到这个特殊的用户体验是通过添加类input-group-seamless-append到我的input-group来激活的，所以我可以控制它应用的特定位置。

如果您不使用 Angular，则需要删除 (click)、*ngIf 和 [attr] 绑定，这些绑定特定于显示/隐藏密码功能。

这是它最终的样子：

不专心：

专注：

Answer 4

这是我仅通过 CSS 就可以做到这一点的方法

.input-group:focus-within .input-group-prepend .input-group-text,
.form-control:focus ~ .input-group-append .input-group-text {
  border-color: #06f;
}

Answer 5

使用 bootsrap 4.6，我能够使用以下 CSS 获得 input-group-prepend 和 input-group-append 周围的边框：

.was-validated:invalid .input-group-prepend .input-group-text,
.was-validated:invalid .input-group-append .input-group-text 
{
   border-color: red;
}