Question

当输入文本被聚焦时，我得到的是聚焦阴影。我想要的是输入文字和右键来显示焦点边框。

我在这里编译了一个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;
}

怎么了？

Answer 1

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

z-index: 1000;

Answer 2

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

&: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;
}

Answer 3

如果您添加一个类来指示哪个插件（追加或前置）您可以使用此：

.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);
                }
            }
        }
    }
}

Bootstrap 4输入组框阴影

3 个答案: