在CSS中，如何重置按鈕的默認瀏覽器給定樣式？

Question

我懷疑瀏覽器將默認樣式應用於<button>元素之類的方式存在問題

為了完全理解我的難題，這涉及影子dom，我將在最后解釋，但是現在，讓我們只關注我已經分離出一個關於CSS的簡單問題的問題的一個版本：

如何將<button>重置為原始瀏覽器默認樣式？

我嘗試過設置border: initial; 和border: unset; 和border: inherit; ，但在每種情況下，在按鈕元素上設置任何這些css屬性都會導致瀏覽器釋放其任何默認樣式

請在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的用例：

• 我正在使用帶有一些Web組件的影子dom
• 我想允許用戶在某些陰影<button>上選擇性地設置樣式
• 所以我設置button { border: var(--button-border); } button { border: var(--button-border); }
  • 但是，即使用戶沒有提供--button-border ，該按鈕也會被視覺管理，並且不會應用瀏覽器樣式
• 甚至設置button { border: var(--button-border, initial); } button { border: var(--button-border, initial); }和其他例子不工作
• 我如何為我的組件的用戶提供一個鈎子，以便將按鈕設置為遠離默認設置，但是當他們決定不應用任何按鈕樣式時，保留默認按鈕？

我覺得我在這里陷入困境，瀏覽器可能沒有這個問題的答案 - 我擔心我要放棄組件內按鈕的默認樣式（不好的做法，默認按鈕是意味着用戶熟悉），否則放棄按鈕的任何自定義樣式（對設計師來說肯定是壞的） - 有沒有希望挽救這種情況？

Answer 1

嘗試：

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