如何实现不可编辑、可选中且置灰的input与textarea元素？

我有<input type="text">和<textarea>元素，在某些步骤中它们的内容不应被编辑。

最初我给这些元素添加了disabled属性，元素变为不可编辑且置灰，表现符合预期。但disabled会阻止内容被选中，不符合我的需求。改用readonly属性后，元素不可编辑且内容可选中，但不会自动置灰。

我需要一种方案让元素同时满足：不可编辑、可选中、置灰三个特性，且优先考虑使用浏览器原生的禁用输入框样式；另外这些元素不属于<form>，无需考虑表单提交问题。

补充说明 #

一开始误以为Chrome和Firefox中readonly属性自带置灰效果，实际是MDN站点的自定义CSS通过:read-only伪类实现的，原生浏览器里readonly输入框并不会自动置灰。此外Pale Moon浏览器不支持:read-only伪类，无法通过该伪类实现置灰。

方案1：兼容全浏览器的CSS模拟原生禁用样式 #

既然无法依赖原生readonly的置灰效果，也无法用:read-only伪类适配Pale Moon，直接给带有readonly属性的元素编写CSS，模拟浏览器原生禁用样式：

input[readonly], textarea[readonly] {
  background-color: #e9ecef; /* 贴近多数浏览器原生禁用的灰背景色 */
  color: #6c757d; /* 匹配原生禁用的文字颜色 */
  cursor: default;
}

可以根据目标浏览器的默认disabled元素样式微调色值，保证视觉上和原生禁用效果一致。

方案2：结合disabled与JavaScript实现可选中 #

如果一定要使用原生禁用样式，可以保留disabled属性，同时通过JavaScript让内容可选中：

// 给所有禁用的输入框绑定选中逻辑
document.querySelectorAll('input:disabled, textarea:disabled').forEach(el => {
  // 鼠标点击选中
  el.addEventListener('mouseup', function(e) {
    e.preventDefault();
    this.select();
  });
  // 聚焦时自动选中
  el.addEventListener('focus', function() {
    this.select();
  });
});

注意：部分浏览器对disabled元素的事件支持存在差异，需要测试适配。

方案3：继承原生禁用样式（限支持的浏览器） #

对于支持:disabled伪类的浏览器，可以让readonly元素直接继承disabled的原生样式：

input[readonly], textarea[readonly] {
  background-color: var(--input-disabled-bg, #e9ecef);
  color: var(--input-disabled-color, #6c757d);
  /* 若浏览器支持CSS变量，可直接引用原生变量；否则手动指定 */
}

但此方案无法兼容Pale Moon，因此方案1仍是最通用的选择。

内容的提问来源于stack exchange，提问作者Gras Double