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。

css 复选框已选中 material 设计叠加

css checkbox checked material design overlay

html

javascript

css

checkbox

jquery