Question

我正在尝试做一些像复选框那样花哨的材料设计，但是当我选中复选框时，我仍然无法应用叠加层。以下是我到目前为止所做的一个示例：http://codepen.io/stefancenusa/pen/rVwEBB

input[type="checkbox"]:checked + label {
  /*what should i write here?*/
}

我打算做什么：点击一个复选框后，我想要一个白色的叠加层，中间有一个勾号出现在彩色圆圈上。

这可能吗？我怎样才能做到这一点？

谢谢！

Answer 1

Fork

我试了一下。希望它有所帮助。

input[type="checkbox"]:checked + label:before {
  content: '✓';
  font-size: 2em;
  line-height: 53px;
  text-align: center;
  display: block;
  position: absolute;
  width: 53px;
  height: 53px;
  top: 0;
  left: 0;
  color: #fff;
}

更新：稍微调整一下..

您可以设置一个很酷的图标来替换文字，替换其他字体或background-image。

css复选框选中材料设计叠加

1 个答案: