CSS 输入：焦点和边框颜色问题

Question

问题

我目前正在开发一个使用 bootstrap4 构建前端的项目。为了匹配 CI，我更改了输入的突出显示颜色以匹配公司的主要配色方案。

基本上我做了以下事情：

:root{
    --custom-red: #871d33;
}

...

input:focus, textarea:focus, select:focus{
    border-color: var(--custom-red);
    box-shadow: 0 0 3px var(--custom-red);
    -moz-box-shadow: 0 0 3px var(--custom-red);
    -webkit-box-shadow: 0 0 3px var(--custom-red);
}

这会在表单中产生以下结果（Firefox），这是可以的：

但不知何故，一旦选择了一个值，日期输入字段就会以一种奇怪的方式混乱；看一下：屏幕截图有趣的是，一旦调整视口大小，裁剪问题就会重置，这意味着存在某种渲染问题。

现在，我正在查看日期字段发生的情况，并最终检测到源：border-color: var(--custom-red); 一旦我从 css 中删除此行，因此坚持使用默认的 bootstrap-blue 突出显示一切都按预期工作 - 不再进行裁剪。

我发现，不知怎的，有一个 8px 左边框和右边框设置，隐藏在某处，因为此设置不会出现在元素检查器上，但可以在框值上清楚地看到这些值：有趣的是 ，这些 8px当我重新添加 css 并：聚焦在我的字段上时，设置发生变化：之后的屏幕截图

由于我没有编辑border-left或border-right参数上的任何内容，所以我无法理解正在发生的事情。我现在的建议是，以某种方式在后台默默地border-color“重置”其他设置。border-xy在我看来，这听起来完全疯狂，但我什至注意到，border-radius当 :focus 被触发时，这肯定会被覆盖。看看这个（需要放大）：border-radius unfocused，border-radiusfocused

在其他浏览器上测试

更新

我刚刚发现outline: none;删除了默认的基于 chrome 的 :focus 行为并使用所需的 css 作为后备。这样，基于 Chrome 的浏览器上的行为至少现在与 Firefox 上的行为类似，但在 Firefox 上，裁剪问题仍然保持不变。

原来的

现在我不确定这是否可能是基于浏览器的问题，所以我也检查了基于 chrome 的浏览器......好吧，看起来：焦点在这里完全不同，而不是点击进入字段！使用元素检查器触发：焦点给出了预期的结果：基于屏幕截图检查器的触发 但简单地单击该字段仅“突出显示”它由于某种原因而变暗： 屏幕截图手动单击border-radius有趣的是，人们可以在这个示例中 看到更多的覆盖，而不是在火狐！

尽管我不明白为什么在基于 Chrome 的浏览器中明显有两种不同类型的“聚焦”，但日期字段按预期工作并且没有裁剪内容：抱歉，不得不删除此屏幕截图，因为我没有足够的点，然而

结尾

所以现在我完全困惑了：

1. 为什么border-color会像在 Firefox 下那样表现？有人遇到过类似的事情吗？
2. 为什么在基于 Chrome 的浏览器上有不同的 :focus 触发器，尽管事实上 :focus 被列为受 GoogleChrome 及其衍生产品支持？

我现在需要一些新鲜的咖啡。感谢您的每一个回复！

示例代码

根据要求，您可以：

input:focus{
  outline: none;
  border-color: red;
  box-shadow: 0 0 3px red;
  -moz-box-shadow: 0 0 3px red;
  -webkit-box-shadow: 0 0 3px red;
}

<input type="date">

Answer 1

解决方法

所以我找不到这个问题的任何根源，但我至少找到了一个解决方法，通过添加自定义默认边框设置：

input{
    width: 100%;
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.3rem 0.5rem;
}

input:focus{
    outline: none;
    border-color: red;
}

<input type="date">

这样，默认行为就会被覆盖，日期输入最终会按预期工作。

但仍然 - 我想知道默认情况下发生了什么？