自定义 CSS 复选框，里面有标题

Question

我正在尝试根据设计师的规范为复选框创建自定义 CSS。我的复选框必须是半径为 60px 的圆，并且复选框标签必须位于该圆的中心。此外，当复选框为 "checked" 时，背景必须变为红色。

这是我到目前为止创造的成果： http://codepen.io/anon/pen/qdrQbV

这是代码：

HTML

<div class="mybox">
  <input type="checkbox" value="None" id="sth" name="check" checked />
  <label for="sth">
    <span>
      Test
    </span>
  </label>
</div>

CSS

.mybox {
  width: 120px;
  position: relative;
  margin: 0;
  padding:0;
  label {
    color: #000;
    width: 120px;
    height: 120px;
    padding:0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 120px;
    border-radius: 50%;
   border: 2px solid black;
    &:after {
      box-sizing: border-box;

      content: '';
      width: 120px;
      height: 120px;
      position: absolute;
      top: 0px;
      left: 0px;
      border: 2px solid red;
      background: red;
      opacity: 0;
      border-radius: 50%
    }


  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }    
  }
}

结果非常符合预期，但正如您在演示中看到的那样，标题被红色覆盖层隐藏了，我一直在修复它。

有什么想法吗？谢谢！

Answer 1

最简单的方法 - 添加 z-index: -1 对于你的后元素

Answer 2

检查此代码

.mybox {
  width: 120px;
  position: relative;
  margin: 0;
  padding: 0;
}
.mybox label {
  color: #000;
  width: 120px;
  height: 120px;
  padding: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 120px;
  border-radius: 50%;
  border: 2px solid black;
}
.mybox label:after {
  box-sizing: border-box;
  content: '';
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 2px solid red;
  background: red;
  opacity: 0;
  border-radius: 50%;
}
.mybox label span {
  position: relative;
  z-index: 9;
}
.mybox input[type=checkbox] {
  visibility: hidden;
}
.mybox input[type=checkbox]:checked + label:after {
  opacity: 1;
}

    <div class="mybox">
      <input type="checkbox" value="None" id="sth" name="check" checked />
      <label for="sth">
        <span>
          Test
        </span>
      </label>
    </div>

您可以在 label

内为 span 标签添加

position: relative;
      z-index: 9;

自定义 CSS 复选框，里面有标题

Custom CSS Checkbox with caption inside

html

css

checkbox