0

I can't set the text color of this button when using all: unset in Safari 13.1 on macOS 10.15. It seems to work fine on Chrome 80 and Firefox 74.

button {
  all: unset;
  color: white;
  background-color: darkblue;
}
<button>button</button>

Desired: The word "button" should appear in white on a dark blue background.

Actual: In Safari (only?!) the word "button" appears black on a dark blue background, which is illegible.

What's going wrong here? Is this my fault? Is there a workaround?

Dan Fabulich
  • 37,506
  • 41
  • 139
  • 175

2 Answers2

1

This is a known bug in Safari. https://bugs.webkit.org/show_bug.cgi?id=158782 It's been open since 2016.

This is happening because the "all: unset" is setting -webkit-text-fill-color to black, and that overrides color.

You can work around it by setting -webkit-text-fill-color to the desired color. Hopefully they'll fix this bug someday!

button {
  all: unset;
  color: white;
  -webkit-text-fill-color: white;
  background-color: darkblue;
}
<button>button</button>
Dan Fabulich
  • 37,506
  • 41
  • 139
  • 175
0

Interesting. The all: unset reset all the values to their inherited values.

If you want a workaround, all you need to do is wrapper it in an element with white text. The snippet below isn't ideal, but it should work in Safari.

button {
  all: unset;
  background-color: darkblue;
}

.button-wrapper {
  color: white;
}
<div class="button-wrapper">
  <button>button</button>
</div>
Jack
  • 1,893
  • 1
  • 11
  • 28