Bootstrap 4.0中如何修改只读输入框的字体颜色？

我明白你遇到的问题了——能修改只读输入框的背景色，但字体颜色和透明度的设置却不生效，这大概率是浏览器默认样式的优先级在搞鬼！很多浏览器会给只读状态的输入框预设字体颜色（比如灰色），这些默认样式的优先级可能比你自定义的规则更高，或者输入框的文字渲染有特殊的浏览器内核处理逻辑。

可行的解决方案代码 #

你可以尝试下面的CSS代码，针对不同浏览器内核做适配，同时明确覆盖字体颜色和透明度属性：

/* 标准写法，适配大多数现代浏览器 */
input:read-only {
  background-color: yellow;
  /* 自定义字体颜色 */
  color: #2c3e50;
  /* 自定义透明度（会影响整个元素，包括背景） */
  opacity: 0.8;
  /* 针对WebKit内核浏览器（Chrome/Safari）的文字颜色覆盖 */
  -webkit-text-fill-color: #2c3e50;
}

/* Firefox 兼容写法 */
input:-moz-read-only {
  background-color: yellow;
  color: #2c3e50;
  opacity: 0.8;
}

关键注意事项 #

• 选择器特异性：如果你的页面中有更具体的CSS规则（比如.form-group input），那么你需要提升自定义规则的特异性，比如写成.your-form-container input:read-only，确保它的优先级高于默认样式。
• 仅修改文字透明度：如果不想让背景也变透明，不要用opacity，改用带透明度的颜色值，比如color: rgba(44, 62, 80, 0.8)（最后一个数值是透明度，范围0-1）。
• 检查冲突样式：打开浏览器开发者工具（F12），查看只读输入框的元素样式，看看是否有其他CSS规则覆盖了你的颜色设置，针对性调整即可。

完整示例 #

<!-- HTML -->
<input type="text" value="这是只读文本" readonly>
<input type="text" value="这是可编辑文本">

/* CSS */
input:read-only {
  background-color: yellow;
  color: darkred;
  -webkit-text-fill-color: darkred;
  /* 仅文字透明的写法 */
  /* color: rgba(139, 0, 0, 0.7); */
}

input:-moz-read-only {
  background-color: yellow;
  color: darkred;
}

内容的提问来源于stack exchange，提问作者R. Heinrich K. Fassbender