还是看不懂checked

form {
 border: 1px solid #ccc;
 padding: 20px;
 width: 300px;
 margin: 30px auto;
}

.wrapper {
 margin-bottom: 10px;
}

.box {
 display: inline-block;
 width: 20px;
 height: 20px;
 margin-right: 10px;
 position: relative;
 border: 2px solid orange;
 vertical-align: middle;
}

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