Question

我正在尝试按照设计师的规格为复选框创建自定义CSS。我的复选框必须是半径为60px的圆圈，复选框标签必须位于该圆圈的中心位置。此外，当“选中”复选框时，背景必须变为红色。

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

以下是代码：

HTML

<controls:FlyoutsControl>
    <controls:Flyout Header="Flyout" Position="Right" Width="200" IsOpen="True">
        <TextBlock FontSize="24">Hello World</TextBlock>
    </controls:Flyout>
</controls:FlyoutsControl>

CSS

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

结果非常符合预期，但正如您在演示中看到的那样，标题会被红色叠加层隐藏起来，我无法修复它。

有什么想法吗？谢谢！

Answer 1

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

Answer 2

检查此代码

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您只需在position: relative; z-index: 9;

内添加span代码label即可

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

2 个答案: