CSS复选框选中的材料设计叠加

Question

I'm trying to do some fancy material design like checkboxes but I got stuck at applying an overlay when the checkboxes are checked. Here is an example of what I have done so far: http://codepen.io/stefancenusa/pen/rVwEBB

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

What I intend to do: after a checkbox is clicked, I'd like a white overlay with a tick in the center to appear over the colored circle.

Is this possible? How can I achieve that?

Thank you!

Answer 1

Fork

I gave it a shot. Hope it helps.

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

Update: Tweaked it a little..

You can set a cool icon to replace the text, by some other font or by background-image .