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

Posted 2023-03-05

【中文标题】CSS 输入：焦点和边框颜色问题

【英文标题】：CSS input:focus and border-color issues

【发布时间】：2021-11-16 00:42:19

【问题描述】：

问题

我目前正在开发一个使用 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），没关系：Screenshot

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

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

我发现，不知何故有一个 8px 的左边框和右边框设置，隐藏在某处，因为此设置不会出现在元素检查器上，但可以在框值上清楚地看到值：Screenshot before 有趣的是，这些 8px 设置发生了变化，当我再次重新添加我的 css 并 :focus on my field: Screenshot after

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

在其他浏览器上测试

更新

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

原创

现在我不确定这是否可能是基于浏览器的问题，所以我也检查了基于 chrome 的浏览器......好吧，看起来 :focus 与单击该字段完全不同！ 使用元素检查器触发 :focus 会得到预期的结果：Screenshot inspector based triggering 但由于某种原因，只需单击该字段只会“突出显示”它变暗： Screenshot manually clicking 有趣的是，在这个例子中，被覆盖的border-radius 比在 Firefox 上看到的更多！

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

结束

所以现在我完全糊涂了：

为什么border-color 的行为与它在Firefox 下的行为一样？有人遇到过这样的事情吗？ 为什么在基于 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">

【参考方案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">

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

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