Creating Custom Checkboxes style with css

编辑代码
<style>
input[type=checkbox]{
  cursor: pointer;
}
input[type=checkbox]:checked:before {
content: "\2713";
    background: #fffed5;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 20px;
    text-align: center;
    line-height: 8px;
    display: inline-block;
    width: 13px;
    height: 15px;
    color: #00904f;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    margin: -3px -3px;
    text-indent: 1px;
}
input[type=checkbox]:before {
content: "\202A";
    background: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 20px;
    text-align: center;
    line-height: 8px;
    display: inline-block;
    width: 13px;
    height: 15px;
    color: #00904f;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    margin: -3px -3px;
    text-indent: 1px;
}
</style>
<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox"id="id2">