html - Custom checkbox tick -

i want know how make check inside of custom checkbox after click. try hide normal checkbox below custom one. how can black , simple tick, after user ticks checkbox?

// custom checkbox  .xcheckbox {    width: 25px;    margin-left: 40px;    position: relative;  }      /**      * box      */    .xcheckbox label {    margin-top: 5px;    position: absolute;    cursor: pointer;    width: 20px;    height: 20px;    border-radius: 3px;    top: 0;    left: 0;    background-color: blue;    border: 1px solid #ddd;  }      /**      * tick      */    .xcheckbox input[type=checkbox]:checked+label {    transform: rotate(-45deg);    /* testing purpose */  }

<div class="xcheckbox">    <input type="checkbox" value="1" id="xcheckboxinput" name="" />    <label for="xcheckboxinput"></label>  </div>

http://codepen.io/maartinshh/pen/dvbyge

create tick using pseudoelement on label , hide default. when input checked, show tick.

also, hide default input box can set it's opacity 0:

#customcheckboxinput {   opacity: 0; } 

codepen

// custom checkbox  .customcheckbox {    width: 25px;    margin-left: 40px;    position: relative;  }    #customcheckboxinput {    opacity: 0;  }      /**   * box   */    .customcheckbox label {    margin-top: 5px;    position: absolute;    cursor: pointer;    width: 20px;    height: 20px;    border-radius: 3px;    top: 0;    left: 0;    background-color: blue;    border: 1px solid black;  }      /**   * tick   */    .customcheckbox input[type=checkbox]+label::after {    content: "\2713";    color: #000;    text-align: center;    opacity: 0;    position: absolute;    left: 2px;    transform: rotate(45deg);    font-weight: bold;  }    .customcheckbox input[type=checkbox]:checked+label {    transform: rotate(-45deg);    /* testing purpose */    cursor: pointer;    /* doesnt work supposed */  }    .customcheckbox input[type=checkbox]:checked+label::after {    opacity: 1;  }

<div class="customcheckbox">    <input type="checkbox" value="1" id="customcheckboxinput" name="" />    <label for="customcheckboxinput"></label>  </div>

update

as requested, create effect multiple checkboxes requires reworking of html , css.

basically...wrap input , label in container div. solves problem of position: absolute overlapping labels.

i've tried simplify initial css in example, notably creating custom checkbox entirely pseudoelement, , not styling label. transform property removed demo simplicity.

codepen

.input-container {    margin-bottom: 10px;  }    /* use :not selector here support older broswers      more info: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/  */    .input-container input[type=checkbox]:not(old) {    opacity: 0;    /* match dimentsions of custom label */    width: 20px;    height: 20px;    padding: 0;    margin: 0;  }    /**   * box   */    .input-container label {    position: relative;  }    .input-container label::after {    content: "";    position: absolute;    /*cover default input */    top: -5px;    left: -20px;    width: 20px;    height: 20px;    border-radius: 3px;    background-color: blue;    border: 1px solid black;    transform: rotate(0);    pointer-events: none;    text-align: center;    color: #fff; /* easier see in demo */  }    /**   * tick   */    .input-container input[type=checkbox]:checked+label:after {    content: "\2713";  }

<div class="customcheckbox">    <div class="input-container">      <input type="checkbox" value="1" name="" />      <label for="customcheckboxinput"></label>    </div>    <div class="input-container">      <input type="checkbox" value="1" name="" />      <label for="customcheckboxinput"></label>    </div>    <div class="input-container">      <input type="checkbox" value="1" name="" />      <label for="customcheckboxinput"></label>    </div>    <div class="input-container">      <input type="checkbox" value="1" name="" />      <label for="customcheckboxinput"></label>    </div>  </div>