CODEWITHSUNDEEP
htmlcssweb-componentshadow-dom
ChaseMoskal
ChaseMoskal

Reputation: 7681

In CSS, how can I reset a button's default browser-given styles?

i suspect there's a problem with the way browsers are applying default styles onto things like <button> elements

to fully understand my conundrum, this involves the shadow dom, and i'll explain that at the end, however for now, let's just focus on a version of the problem i have isolated to a simple question about CSS:

how can i reset a <button> to it's original browser default styling?

i've tried setting properties like border: initial;, and border: unset; and border: inherit;, but in every case, setting any of these css properties on a button element causes the browser to release any of its default styling

please see the 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>

in this example, the first button is a control, so we can see the default browser styling

on the buttons where we try to reset background, the button totally changes style, the background disappears, and even the border changes

on the buttons where we try to reset border, the button totally changes, but oddly in a different way -- here the border disappears, and the background changes

what explains these strange and unexpected results?

why do i need to reset a button, you ask? that seems like a weird thing to do, you think? consider my use case involving web component and the shadow dom:

i feel like i'm stuck in a pickle here, and the browser might not have an answer to this problem — i fear that i'll have to either abandon the default styling for buttons within my components (bad practice, the default buttons are meant to be familiar to users), otherwise abandon any custom styling to the buttons (bad for designers that's for sure) — is there any hope to salvage this situation?

Upvotes: 2

Views: 4761

Answers (2)

kuzey beytar
kuzey beytar

Reputation: 3226

You can simply use all: unset without forgetting to add outline on focus which is important for accessibility.

button {
  all: unset;
  cursor: pointer;
}

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

Upvotes: 2

user11656141
user11656141

Reputation: 81

Try:

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

Upvotes: 2

Related Questions