带有自定义框阴影和焦点指示器的奇怪边框

Posted 2023-02-24

【中文标题】带有自定义框阴影和焦点指示器的奇怪边框

【英文标题】：Strange border with custom box-shadow and focus indicator

【发布时间】：2020-09-28 13:50:44

【问题描述】：

我用两个带有自定义轮廓和框阴影的数字输入制作了sample。 在谷歌浏览器中，我在关注底部输入元素后看到奇怪的黑灰色边框。

对于这个输入我使用

                  .shadowBox:focus 
                    outline: 1px black dotted !important;
                    box-shadow: 1px 1px grey;                    
                     

如果我设置box-shadow: none，这个奇怪的边框就不会出现。我做错了什么？

已编辑。如果我使用 box-shadow，为什么这个“奇怪的边框”会出现在“焦点”上？此边框仅存在于 Google Chrome 中，但不存在于 Mozilla Firefox 中。

【参考方案1】：

如果你想同时拥有，虚线轮廓和边框实线你可以有这个代替：

.shadowBox:focus 
  outline: 1px dotted black;
  border: 2px black solid;

【讨论】：

我的意思是，如果我使用 box-shadow，为什么这个“奇怪的边框”会出现在“焦点”上？此边框仅存在于 Google Chrome 中，不存在于 Mozilla Firefox 中。

嗯，一点都不奇怪。单击输入后，您正在使用焦点选择器，它会提供所需的属性。你可以设置任何你想要的属性。在这种情况下，如果您不想要所谓的“奇怪”边框，只需添加边框：无，该边框就会消失。

如果我用box-shadow: null点击输入，这个边框不会出现。你的意思是，需要为自定义焦点显式设置边框属性，可能至少适用于谷歌浏览器？如果我想像在 Mozilla Firefox 中一样使输入元素具有焦点，我可以用这个边框做什么？