能否继承其他HTML标签默认样式？实现output仿disabled input效果

首先明确：没有原生CSS方法可以直接继承其他HTML标签的默认UA（用户代理）样式。浏览器的内置样式（比如input:disabled的样式）是通过私有属性（像你遇到的-internal-light-dark）实现的，这些属性属于浏览器内部实现，不对外暴露，无法在自定义CSS中直接引用或继承。

不过有几个靠谱的替代方案：

1. 手动模拟input:disabled的样式 #

这是最稳妥的方式，直接用标准CSS属性还原disabled输入框的视觉效果，还能自己调整细节：

/* 给output加一个类，方便复用 */
output.disabled-input {
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #f5f5f5;
  color: #666;
  font-size: 0.9em; /* 略小字体 */
  padding: 3px 6px;
  /* 禁止交互，模拟disabled状态 */
  pointer-events: none;
}

/* 适配深色模式 */
@media (prefers-color-scheme: dark) {
  output.disabled-input {
    border-color: #555;
    background-color: #333;
    color: #aaa;
  }
}

使用时直接给<output>加上这个类就行：<output class="disabled-input">...</output>

2. 利用浏览器暴露的CSS变量（不推荐生产环境） #

部分现代浏览器会给表单元素暴露一些UA级的CSS变量，比如Chrome里的--webkit-input-border-color之类的，但这些变量没有标准规范，不同浏览器差异极大，而且随时可能被移除，只适合本地测试用，不建议在生产环境依赖。

3. 用隐藏的input:disabled做样式参考（鸡肋） #

你可以在页面里隐藏一个disabled状态的<input>，然后通过CSS变量把它的样式“拷贝”给<output>，但本质上还是需要手动映射变量，步骤繁琐，不如直接写模拟样式高效。

总结 #

最实用的方案就是手动模拟样式，既能保证兼容性，又能精准控制视觉效果。浏览器的私有内部属性本来就不允许外部调用，所以放弃直接继承的想法，自己写反而更可控。

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