汉堡按钮颜色不变

Question

如何更改CSS上的汉堡菜单的颜色。这是我的尝试

.hamburger-inner{
    background-color: white;
}




body{
  background-color: red;
}

<link href="https://cdn.rawgit.com/jonsuh/hamburgers/0aedeec9/dist/hamburgers.css" rel="stylesheet">



 <button class="hamburger hamburger--emphatic is-active" type="button" id="clickme">
                                <span class="hamburger-box">
                                    <span class="hamburger-inner"></span>
                                </span>
                            </button>

我正在尝试将颜色从黑色更改为白色。任何建议。

Answer 1

您应该像这样在伪元素之前和之后将背景颜色设置为

.hamburger--emphatic.is-active .hamburger-inner::before {
background-color: white;
}

.hamburger--emphatic.is-active .hamburger-inner::after {
background-color: white;
}

Answer 2

使用以下CSS更改颜色

    .hamburger-box .hamburger-inner,
    .hamburger-box .hamburger-inner::before,
    .hamburger-box .hamburger-inner::after {
        background-color: white;
    }

.hamburger-box .hamburger-inner,
.hamburger-box .hamburger-inner::before,
.hamburger-box .hamburger-inner::after {
  background-color: white;
}

body {
  background-color: red;
}

<link href="https://cdn.rawgit.com/jonsuh/hamburgers/0aedeec9/dist/hamburgers.css" rel="stylesheet">



<button class="hamburger hamburger--emphatic is-active" type="button" id="clickme">
                                <span class="hamburger-box">
                                    <span class="hamburger-inner"></span>
                                </span>
                            </button>

Answer 3

CSS：

.hamburger-inner::before,
.hamburger-inner::after {
    background:#fff;
}