css - Bootstrap 4 输入组框阴影

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

怎么了？

标签： csstwitter-bootstrapsassbootstrap-4

Answer 1

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

z-index: 1000;