使用:checked选择器实现自定义单选按钮效果

今天在学习css3时用:checked选择器实现自定义单选按钮效果，感觉这个选择器很棒，来记录一下。

:checked表示选中状态，可以配合其他标签实现自定义样式。

例如，想实现这个效果：

部分css代码如下：

.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}

在这里，首先用span定义对号选中的样式；之后使用“+span”选中type类型为checkbox的input元素后面挨着的span标签元素；

最后，使用opacity: 0和opacity: 1实现未选中状态和选中状态（opacity: 0表示完全透明，opacity: 1便是完全不透明）。