Bootstrap 4 输入组框阴影答案

【问题标题】：Bootstrap 4 input-group box-shadowBootstrap 4 输入组框阴影
【发布时间】：2019-12-12 07:07:38
【问题描述】：

我拥有的是输入文本聚焦时获得的焦点阴影。我想要的是有文本输入和右键显示焦点边框。

我在这里编译了一个 JSfiddle：http://jsfiddle.net/a5upvc82/3/

正如您所见，当输入聚焦时，文本输入和右侧附加按钮之间没有显示框阴影。如何解决？如果我理解正确的话，问题出在这部分代码

&:focus + .input-group-append .btn {
    border-color: #20adc1;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
}

怎么了？

【问题讨论】：

你忘了选择输入本身：&:focus, &:focus + .input-group-append .btnjsfiddle.net/a5upvc82/25

标签： css twitter-bootstrap sass bootstrap-4

【解决方案1】：

也为输入添加相同的代码：

&:focus{
  border-color: #20adc1;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21dff3;
}

【讨论】：

【解决方案2】：

我认为正在发生的事情是你的影子隐藏在另一个元素之下。一个快速的解决方法是在您想要查看其阴影的元素上设置 z-index。

z-index: 1000;

【讨论】：

【解决方案3】：

如果你添加一个类来指示哪个插件（追加 vs 前置）你可以用这个：

.input-group {
    .form-control {
        &.has-group-append {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;

            & ~ .input-group-append {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            &:focus {
                border-right: none !important;
                box-shadow: -0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);

                & ~ .input-group-append {
                    border-color: #80bdff;
                    border-left: none !important;
                    outline: 0;
                    box-shadow: 0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);
                }
            }
        }

        &.has-group-prepend {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;

            & ~ .input-group-prepend {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &:focus {
                border-left: none !important;
                box-shadow: 0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), 0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);

                & ~ .input-group-prepend {
                    border-color: #80bdff;
                    border-right: none !important;
                    outline: 0;
                    box-shadow: -0.1rem -0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0.1rem 0.1rem 0.1rem rgba(0, 123, 255, 0.25), -0.1rem 0 0.1rem 0.1rem rgba(0, 123, 255, 0.25);
                }
            }
        }
    }
}

【讨论】：