Question

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

为了完全理解我的难题，这涉及到影子领域，我将在最后解释一下，但是现在，让我们仅关注我已经隔离为一个简单的CSS问题的版本：

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

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

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

我正在将Shadow dom与某些Web组件一起使用
我希望允许用户在某些阴影<button>上可选地设置样式
所以我设置了button { border: var(--button-border); }
- 但是，即使用户不提供--button-border，该按钮也具有视觉效果，并且未应用浏览器样式
即使设置button { border: var(--button-border, initial); }，其他示例也不起作用
我该如何为我的组件用户提供一个钩子，以使按钮的样式与默认按钮不同，但是当他们决定不应用任何按钮样式时，保留完整的默认按钮吗？

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

Answer 1

尝试：

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

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

1 个答案: