javascript - css 复选框选中 Material 设计覆盖

Question

我正在尝试做一些花哨的 Material 设计，比如复选框，但我在选中复选框时应用叠加层时遇到了困难。这是我到目前为止所做的示例: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。