问题
我目前正在做一个项目，我用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的border-left和border-right设置，隐藏在某个地方，因为这个设置不会出现在元素检查器上，但可以清楚地看到框值有趣的是，这些8px的设置改变了，当我重新添加css并:focus在我的字段:
后的截图因为我没有编辑任何关于border-left或border-right参数，我不能得到我的头周围发生了什么。我现在的建议是，border-color以某种方式在后台默默地"重置"其他border-xy设置。在我看来，这听起来完全疯狂，但我甚至注意到，border-radius绝对被覆盖，当:焦点被触发。看看这个(需要放大):border-radius unfocused, border-radius focused
在其他浏览器上测试
更新我刚刚发现outline: none;删除了默认的基于chrome的焦点行为，并使用了所需的css作为回退。这样，基于chrome的浏览器的行为至少现在与Firefox类似，但在Firefox上，裁剪问题仍然保持不变。
现在我不确定这是否可能是一个基于浏览器的问题，所以我检查了基于chrome的浏览器以及…好吧，看起来:焦点在这里是完全不同的东西，而不是点击进入领域!触发:使用元素检查器的焦点给出预期的结果:基于屏幕截图检查器的触发但是，由于某种原因，简单地点击字段只会将其"突出显示"为黑色:手动点击截图有趣的是，在这个例子中可以看到覆盖的border-radius甚至比在Firefox中更多!
尽管我不明白为什么在基于chrome的浏览器中明显有两种不同类型的"聚焦"，日期字段按预期工作，而不是裁剪内容:对不起，不得不删除此截图，因为我没有足够的点，但是
<标题>结束现在我完全糊涂了:
- 为什么
border-color的行为就像它在Firefox下的行为一样?有人遇到过这样的事吗? - 为什么有不同的:焦点触发基于chrome浏览器，尽管事实:焦点被列为支持的谷歌chrome和衍生产品?
我现在需要一些新鲜的咖啡。感谢每一个回复!
示例代码按要求，给你:
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">变通办法
所以我找不到这个问题的根源，但我至少找到了一个解决办法，即添加自定义默认边框设置:
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">这样默认行为被覆盖，日期输入最终按预期工作。
但是，我仍然想知道在默认情况下发生了什么?