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