我懷疑瀏覽器將默認(rèn)樣式應(yīng)用于& ltbutton & gt元素

為了充分理解我的難題，這涉及到影子dom，我將在最后解釋這一點(diǎn)，但是現(xiàn)在，讓我們只關(guān)注我已經(jīng)隔離到一個關(guān)于CSS的簡單問題的問題的一個版本:

如何重置a & ltbutton & gt到它的原始瀏覽器默認(rèn)樣式？

我試過設(shè)置像border: initial這樣的屬性；，和邊框:未設(shè)置；和邊框:繼承；但是在任何情況下，在button元素上設(shè)置這些css屬性都會導(dǎo)致瀏覽器釋放其默認(rèn)樣式

請參見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>

在本例中，第一個按鈕是一個控件，因此我們可以看到默認(rèn)的瀏覽器樣式

在我們試圖重置背景的按鈕上，按鈕完全改變了樣式，背景消失了，甚至邊框也變了

在我們試圖重置邊框的按鈕上，按鈕完全改變了，但奇怪的是以不同的方式——這里邊框消失了，背景改變了

如何解釋這些奇怪和出乎意料的結(jié)果？

你會問，為什么我需要重置一個按鈕？你覺得這樣做很奇怪嗎？考慮我的用例，包括web組件和影子dom:

我正在使用一些web組件的影子dom 我想允許用戶隨意設(shè)置一些陰影的樣式& ltbutton & gts 于是我設(shè)置了button { border:var(-button-border)；} 然而，即使用戶沒有提供按鈕邊框，按鈕也是可視化管理的，并且不會應(yīng)用瀏覽器樣式 偶數(shù)設(shè)置按鈕{ border: var( - button-border，initial)；}而其他的例子都不起作用 我如何給我的組件的用戶一個鉤子，讓他們不用默認(rèn)的按鈕樣式，但是當(dāng)他們決定不應(yīng)用任何按鈕樣式時(shí)，保持默認(rèn)按鈕不變？ 我覺得我陷入了困境，瀏覽器可能沒有這個問題的答案——我擔(dān)心我將不得不放棄我的組件中按鈕的默認(rèn)樣式(糟糕的做法，默認(rèn)按鈕應(yīng)該是用戶熟悉的),或者放棄按鈕的任何自定義樣式(這對設(shè)計(jì)師來說肯定是不好的)—還有希望挽救這種情況嗎？

嘗試:

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

您可以簡單地使用all: unset，但不要忘記在焦點(diǎn)上添加輪廓，這對可訪問性很重要。

button {
  all: unset;
  cursor: pointer;
}

button:focus {
  outline: blue 1px auto;
}