background-color: transparent shows as background-color: #0000 in Safari and IE11 browsers

Question

The background color for some buttons appears to be black and when I checked the value in the browser, it shows as #0000, whereas my CSS has background-color: transparent, I tried changing the opacity to 0, but even that doesn't seem to work.

Note: I am not using any background-image: url property, its just background-color. I tried searching here for other answers but they don't seem to work.

Hamburger icon:

Hamburger icon

My CSS:

.menu-toggle {
  background-color: #0000;
  border: none;
  color: #333;
  display: block;
  float: left;
  margin-left: .2em;
  padding: .5em;
}

Whereas in my code I have written it to be transparent.

have you tried **background-color:transparent !important;** ? — Viira, Aug 23 '18 at 05:19
The snippet you posted contains "background-color: #0000;"? So 1. where does this snippet come from and where is your css with "background-color: transparent;" and 2. is #0000 even a valid color notation? Aren't they either 3 hex digits for RGB or 6 digits for RRGGBB? — Holzchopf, Aug 23 '18 at 05:25
and background-color:#0000; is not a valid property!! It won't work — Viira, Aug 23 '18 at 05:26
@Holzchopf: It is valid, but it's relatively new. Presumably the snippet is what's reflected in the inspector, since he claims that what he wrote is different. — BoltClock, Aug 23 '18 at 06:37

BoltClock · Answer 1 · 2018-08-23T06:46:47.510

The 4-digit hex notation #0000 is new to CSS Color level 4 and has been supported in Safari since version 10. It is valid CSS, and has been pretty widely supported for almost a year now.¹ You can learn more about it here. I don't know why Internet Explorer 11 is showing that notation to you, considering the Color 4 spec wasn't even published at the time it was released (the FPWD was published in 2016, nearly three years later). Not even Microsoft Edge has any support for any of the new color notations yet.

Nevertheless, it's pretty typical of browsers to reflect computed values in a different notation to what you have specified, as long as you're not looking at window.getComputedStyle() or the Computed Values section of the inspector. The transparent keyword, the notation #0000, and the notation rgba(0, 0, 0, 0) all equal the same value, so don't worry that the browser might be changing your CSS.

_{Or over two years if you count it being available behind the experimental features flag from Chrome 52 to 61.}

background-color: transparent shows as background-color: #0000 in Safari and IE11 browsers

1 Answers1