Bootstrap表单只读状态 Bootstrap如何设置input为readonly样式-Bootstrap教程-PHP中文网

bootstrap 5 不提供 readonly 样式类且移除了默认视觉反馈，导致只读输入框外观与可编辑状态无异；须手动添加 background-color、cursor 等 css 以明确语义并保障可访问性。

直接结论：bootstrap 本身不提供独立的 readonly 样式类，它依赖原生 html 的 readonly 属性，但默认样式在不同版本中表现不一致——尤其是 bootstrap 5 移除了对 readonly 输入框的灰色背景和禁用光标等视觉反馈，容易让用户误以为可编辑。

为什么加了 `readonly` 属性但看起来还是“可点可输”？

这是 Bootstrap 5 的典型表现：原生 input readonly 元素在未额外干预时，背景色、边框、光标都和普通输入框几乎一样，仅靠属性本身无法传达“只读”语义。用户点击后聚焦、甚至可能误触键盘（虽然实际输不进内容），体验差。

Bootstrap 4 对 readonly 有基础样式（浅灰背景 + not-allowed 光标），但不够明显
Bootstrap 5 完全移除了这些默认样式，回归浏览器原生行为
如果同时用了 disabled，样式虽明显（灰色+禁用），但会丢失表单值提交能力——disabled 字段不会被 form 提交

怎么让 `readonly` input 真正“看起来不可编辑”？

必须手动补样式。最稳妥的方式是用自定义 CSS 覆盖，而不是依赖 Bootstrap 类（它没提供 .form-control-readonly 这种东西）。

VPS Bootstrap

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

下载

目标：添加浅灰背景、禁用光标、保持边框清晰、保留焦点状态（便于键盘导航）

推荐写法（适配 Bootstrap 5）：

input[readonly] {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 1;
}
input[readonly]:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(134, 183, 254, 0.25);
}