如何还原按钮的默认样式？

Question

我想在我们网站的高对比度模式下将按钮重置为浏览器默认值。仅删除样式是没有选择的，因为我必须更改很多代码。

我认为将initial分配给每个更改的CSS属性将是一件容易的事。事实证明，这是行不通的：虽然实际上重置了某些属性，但浏览器将不会应用其原始的背景颜色和边框，对于Chrome，则不会应用按钮禁用时的文本颜色。

有没有办法做到这一点，或者我只能大致重构浏览器的默认设置吗？ initial的目的是什么？

编辑： JSFiddle展示了问题。

Answer 1

我想您的用于高对比度模式的html的父类中有一个类……举例来说，您的身体上有“ highcm”类

您可以将实际的CSS样式表更改为类似的样式：

body:not(.highcm) .youractualclass  button {
    color: red;
}

这样，只有您的按钮上的主体没有“ highcm”的样式，其余部分将呈现浏览器的默认样式

Answer 2

  

虽然实际上重置了某些属性，但浏览器将不适用   其原始背景颜色和边框

在我看来，OP正在寻找revert值功能。

请参见the spec regarding revert-CSS范围的属性值之一：

  

将级联值回滚到用户级别，以便指定   计算值，就好像没有为它指定作者级规则一样   此元素上的此属性。 ...

很遗憾，revert的值当前为not well supported。

启用还原实际上可以很好地概括（并且还可以点亮还原和初始值之间的区别）

  

将属性值重置为默认值的CSS关键字值   由浏览器在其UA样式表中指定，就好像该网页具有   不包括任何CSS。例如，display:revert上的<div>   结果为display:block。这与初始值相反，   只是根据每个属性进行定义，对于display   是inline。