CSS 复选框选中了材质设计叠加

css checkbox checked material design overlay

本文关键字：叠加 复选框 CSS      更新时间：2023-09-26

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

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

我打算做什么：单击复选框后，我希望在彩色圆圈上显示一个中间带有勾号的白色叠加层。

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

谢谢！

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 。

相关文章：