在 CSS 中，如何重置按钮的默认浏览器给定样式？

Question

我怀疑浏览器将默认样式应用于 <button> 元素之类的方式存在问题

为了完全理解我的难题，这涉及到 shadow dom，我将在最后解释这一点，但是现在，让我们只关注我已经隔离的一个关于 CSS 的简单问题的版本：

如何将<button> 重置为原来的浏览器默认样式？

我尝试过设置border: initial;、border: unset; 和border: inherit; 之类的属性，但在每种情况下，在按钮元素上设置任何这些 css 属性都会导致浏览器释放其任何默认样式

请查看following example on codepen

<button>control</button>

<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>

<button id="b4">b4</button>
<button id="b5">b5</button>
<button id="b6">b6</button>

<style>
  #b1 { background: initial; }
  #b2 { background: unset; }
  #b3 { background: inherit; }

  #b4 { border: initial; }
  #b5 { border: unset; }
  #b6 { border: inherit; }
</style>

在这个例子中，第一个按钮是一个控件，所以我们可以看到默认的浏览器样式

在我们尝试重置background的按钮上，按钮完全改变了样式，背景消失了，甚至边框也改变了

在我们尝试重置 border 的按钮上，按钮完全改变了，但奇怪的是以不同的方式 - 这里边框消失了，背景改变了

是什么解释了这些奇怪和意想不到的结果？

你问我为什么需要重置按钮？这似乎是一件很奇怪的事情，你觉得呢？考虑一下我的用例涉及 Web 组件和影子 dom：

• 我正在将影子 dom 与一些 Web 组件一起使用
• 我希望允许用户在某些阴影<button>s 上选择设置样式
• 所以我设置button { border: var(--button-border); }
  • 但是，即使用户不提供 --button-border，按钮也会在视觉上进行管理，并且不会应用浏览器样式
• 即使设置 button { border: var(--button-border, initial); } 和其他示例也不起作用
• 如何为我的组件的用户提供一个钩子来设置与默认按钮不同的样式，但在他们决定不应用任何按钮样式时保持默认按钮不变？

我觉得我被困在了这里，浏览器可能无法解决这个问题——我担心我不得不放弃组件中按钮的默认样式（不好的做法，默认按钮是为了让用户熟悉），否则放弃对按钮的任何自定义样式（肯定对设计师不利）——有没有希望挽救这种情况？

Answer 1

试试：

button {
     background: none;
     border: none;
     padding: 0;
}