Bootstrap4自定义input:focus border-color导致日期输入框异常问题

问题1 火狐浏览器border-color触发内容裁剪的原因 #

火狐的原生<input type="date">控件基于Shadow DOM实现，默认内置了未对外暴露的边框、内边距规则：你在盒模型里看到的8px左右的左右边框，就是浏览器内置的Shadow DOM层级的样式，默认不会在开发者样式面板展示。
你仅修改border-color属性时，会触发CSS border属性的隐式重置逻辑：浏览器默认的border是「固定宽度 + 固定样式 + 默认颜色」的组合规则，当单独修改color子属性时，浏览器会重新计算整个border的渲染参数，但火狐对日期控件内部Shadow DOM的尺寸同步逻辑存在bug，内部文本区域的宽高没有跟随外层border的更新重新计算，就会出现内容裁剪。调整视口时触发了全局重排，控件尺寸重新计算所以裁剪问题消失。
这个是火狐的已知渲染问题，大量定制原生日期控件样式的开发者都遇到过同类异常。

问题2 Chrome两种聚焦表现的原因 #

Chrome对原生表单控件的聚焦触发做了分层处理：

• 当你通过DevTools强制勾选:focus伪类、或者用键盘Tab切换触发聚焦时，走的是标准CSS伪类匹配逻辑，会完全应用你自定义的:focus样式
• 当你用鼠标直接点击日期输入框触发聚焦时，Chrome会优先调用内置的原生表单交互高亮规则，这个规则的优先级高于普通的用户自定义:focus样式，所以你会看到两种不一样的表现。你加上appearance: none重置原生控件外观后，两种触发方式的表现就会完全统一。

修复方案 #

你可以显式声明完整的border规则，避免只修改border-color触发隐式重置，同时重置原生控件外观统一多浏览器表现：

/* 先统一重置所有输入框的原生外观，消除浏览器默认样式干扰 */
input, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 显式指定默认边框属性，避免后续修改触发隐式重置 */
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

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

input:focus, textarea:focus, select:focus{
    outline: none;
    /* 完整声明border属性，不要只改color */
    border: 1px solid var(--custom-red);
    box-shadow: 0 0 3px var(--custom-red);
    -webkit-box-shadow: 0 0 3px var(--custom-red);
}

上面的代码可以同时解决火狐的内容裁剪问题，以及Chrome两种聚焦表现不一致的问题。

内容的提问来源于stack exchange，提问作者Aurelon