CSS 自定义复选框不隐藏 :after 和 :before 元素

Question

我编写了这段 CSS 代码来创建自己的复选框：

input[type="checkbox"]{
  display: none;
}
.checkbox{
  position: relative;
  width: 60px;
  height: 19px;
  background-color: green;
  border-radius: 10px;
}

.checkbox input[type="checkbox"] + label{
  left: 0%;
  top: 0px;
  cursor: pointer;
  position: absolute; /*otherwise ,,left: x px;" isn't working*/
  display: block;
  width: 30px;
  height: 19px;
  border-radius: 100%;
  background-color: red;
  box-shadow: 0px 0px 3px 2px red;

  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
   transition: all .5s ease;
}

.checkbox input[type="checkbox"]:checked + label{
   left: 50%;
   z-index: 1;
   background-color: blue;
   box-shadow: 0px 0px 3px 2px green;
}
.checkbox input[type="checkbox"]:checked + label:before{
   content: "\2714";
   position: absolute;
   left: 8px;
   color: white;
}

.checkbox input[type="checkbox"] + label:before{
  content: "\2718";
  position: absolute;
  left: 8px;
  color: white;
}

.checkbox:before{
  position: absolute;
  left: 5px;
  content: "Yes";
  color: white;
}

.checkbox:after{
  position: absolute;
  left: 35px;
  content: "No";
  color: white;
}

我把它放在 CSS Desk 上：CSSDesk: Decorative checkboxes。接下来，在我的另一个编解码中，我替换了用于禁用我创建的按钮的默认复选框：CSS Desk: 3D Buttons。不幸的是，发生了一些错误 - 在3D Buttons (click to see codecast) 中，复选框没有正确隐藏 :after/:before 元素 - 例如，当您启用所有按钮并且在复选框上看到“否”内容时，仍然可以看到“是”中的“s” - 我认为有些东西会改变字体大小，但我不知道如何证明 - 以及如何解决它。我在.checkbox div 中所做的唯一更改是在按钮后添加 CSS display: inline-block; 以显示复选框：

<div class="checkbox" style="display: inline-block;">
  <input id="disableInfo" type="checkbox">
  <label for="disableInfo"></label>
</div>disable info buttons
 <br/><br/><br/><br/>

我不知道发生了什么。如果有人决定帮助我，那就太好了 - 提前谢谢你。

Answer 1

在第一个示例中，您的font-family 设置为默认serif。在第二个示例中，页面中包含的某些样式将其设置为sans-serif。要么找出哪些样式搞砸了，要么手动将其设置为serif。

---

无论如何，AFAIK 的问题是“这是我的代码转储。我做错了什么？”真的不属于 SO。