时间戳

首页 > 解决方案 > CSS 输入：焦点和边框颜色问题

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

问题描述

问题

我目前正在开发一个使用 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-leftorborder-right参数上编辑任何东西，所以我无法理解正在发生的事情。我现在的建议是，以某种方式在后台默默地border-color“重置”其他设置。border-xy在我看来，这听起来很疯狂，但我什至注意到，border-radius当 :focus 被触发时，它肯定会被覆盖。看看这个（需要放大）：border-radius unfocused，border-radiusfocused

在其他浏览器上测试

更新

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

原来的

现在我不确定这是否可能是基于浏览器的问题，所以我也检查了基于 chrome 的浏览器......好吧，看起来 :focus 与点击该字段完全不同！触发 :focus 使用元素检查器给出了预期的结果：基于屏幕截图检查器的触发 但是由于某种原因，只需单击该字段只会“突出显示”它变暗： 手动单击屏幕截图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">

标签： htmlcssinputbootstrap-4frontend

解决方案

解决方法

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

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">

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

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

推荐阅读