如何在Bootstrap中通过CSS重写浮动标签表单的高亮边框-css教程-PHP中文网

浮动标签表单的高亮边框由 .form-floating > .form-control:focus 类控制，通过 box-shadow 实现而非 border，需配合清除阴影、设置边框色及同步 label 样式。

如何在bootstrap中通过css重写浮动标签表单的高亮边框

浮动标签表单的高亮边框由哪个CSS类控制

Bootstrap 5 的浮动标签（floating label）表单控件，其聚焦时的高亮边框实际由 .form-control:focus 的 box-shadow 实现，而不是 border。默认使用 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) —— 这是蓝色光晕，不是边框变色。

如果你试图改 border-color 却没效果，大概率是因为 box-shadow 完全盖住了 border 的视觉表现，且 Bootstrap 的 :focus 样式优先级较高。

检查是否在自定义样式中漏写了 !important（临时验证可用，但不推荐长期使用）
确保你的 CSS 选择器权重 ≥ Bootstrap 默认的 .form-control:focus
浮动标签依赖 .form-floating 容器，它的子元素 .form-control:focus 和 .form-label 动画会联动，单独改 border 可能导致视觉脱节

覆盖聚焦阴影并还原为纯边框高亮

想用实线边框替代默认光晕，得同时清除 box-shadow 并显式设置 border-color。注意：必须保留 outline: 0，否则键盘聚焦会叠加原生 outline。

.form-floating > .form-control:focus {
  box-shadow: none;
  border-color: #0d6efd;
  outline: 0;
}

如果要适配深色模式或主题色，可结合 @media (prefers-color-scheme: dark) 或 Bootstrap 的 data-bs-theme="dark" 条件重写。

不要只写 .form-control:focus，必须带上 .form-floating > 前缀，否则对非浮动表单也生效
若用了 form-control-lg 或 form-control-sm，它们的 padding 和 font-size 会影响 label 浮动位置，但不影响边框逻辑
IE 不支持 box-shadow 的 inset 形式，但浮动标签本身 IE 就不支持，无需降级处理

保持 label 浮动状态与边框变化同步

浮动标签的 label 在输入框获得焦点或已有值时会上移。如果你只改了边框，但 label 没有对应强调（比如颜色变深），视觉反馈会不完整。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

推荐同步调整 label 文字颜色：

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: #0d6efd;
}

:not(:placeholder-shown) 覆盖“有内容但未聚焦”的状态，避免用户输完字就失去 label 强调
不要用 !important 强行覆盖 .form-label 的默认 color，而是提高选择器 specificity
如果 label 用了 required 星号，星号颜色不会自动继承，需额外加 .form-label.required::after 规则

移动端 Safari 中 focus 边框不触发的常见原因

iOS Safari 对 input 的 :focus 支持较弱，尤其在 type="text" 以外的类型（如 email、tel）或配合 autocomplete 时，可能根本不触发 :focus 样式。

解决办法是用 JavaScript 补充 class：

document.querySelectorAll('.form-floating .form-control').forEach(el => {
  el.addEventListener('focus', () => el.classList.add('focused'));
  el.addEventListener('blur', () => el.classList.remove('focused'));
});

再配 CSS：

.form-floating > .form-control.focused {
  box-shadow: none;
  border-color: #0d6efd;
}
.form-floating > .form-control.focused ~ label {
  color: #0d6efd;
}