Question

我在Bootstrap 4中有一个带有深色背景的选择表单，当我选择一个选项时，我希望选择后的背景保持深色。我的示例适用于Chrome和Firefox。但是在IE和Edge中，焦点对准时背景保持白色。检查我的jsfiddle，有什么想法吗？

.form-control:focus {
  background-color: #121212;
  border-color: #121212;
  outline: 0;
  box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
}

https://jsfiddle.net/cd1eyqvr/3/

Answer 1

从官方文档中检查此链接：

https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/

看来边缘有盒子阴影问题，您必须在样式表中添加额外的CSS。检查链接是否有问题，Box shadow not working in microsoft edge

还要检查此链接以获取完整的边缘阴影框解决方案

https://css-tricks.com/snippets/css/css-box-shadow/

Answer 2

保留.form-control:focus部分并将其添加到CSS中：

.form-control:focus::-ms-value {
        background-color: #242424 !important;
        border-color: #121212 !important;
        color: #ffffff !important;
        outline: 0 !important;
        box-shadow: 0 0 0 0rem rgba(0,123,255,.25);
    }

这部分将在IE11和Edge中工作。

您可以参考我制作的演示：https://jsfiddle.net/yuzhou0602/ofwvuzyr/4/

选定焦点后，保留背景颜色Microsoft Edge

2 个答案: