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)复选框中没有隐藏：在/之前正确的元素之前 - 例如，当你启用所有按钮并打开复选框时，你会看到＆＃34;否＆＃34;内容，仍然＆＃34; s＆＃34;来自＆＃34;是＆＃34;是可见的 - 我认为有些东西会改变字体大小，但我不知道如何证明它 - 以及如何解决它。只更改我在.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的问题是＆＃34;这是我的代码转储。我做错了什么？＆＃34;并非真的属于SO。

CSS Custom复选框不隐藏：after和：before元素

1 个答案: