input[type=checkbox]またはinput[type=radio]スタイル変更

input[type=checkbox]{
   
    -webkit-appearance: none;  -moz-appearance: none; appearance: none;
   
    position: relative; width: 20px; height: 20px; background:#fff; border:1px solid #d8d8d8;
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;outline: none;cursor: pointer;
    vertical-align: middle;
}
    /*content: '√';*/
input[type=checkbox]:after{
    content:''; position: absolute;display: block;width: 100%; height: 100%;
    color: #333; text-align: center;line-height: 18px;
    
     background: url('https://static.98ep.com/img/BigCompany/a.png') no-repeat center;
    -webkit-transition: all ease-in-out 100ms;
    -moz-transition: all ease-in-out 100ms;
    transition: all ease-in-out 100ms;

    -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; opacity: 0;}
input[type=checkbox]:checked:after{-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;opacity: 1;
}

input[type=radio]{
 
    -webkit-appearance: none;  -moz-appearance: none;  appearance: none;
   
    position: relative;  display: inline-block; vertical-align: middle;width: 16px;  height: 16px;
    border: 1px solid #00ccde; outline: none; cursor: pointer;
     
    -webkit-border-radius: 16px;  -moz-border-radius: 16px; border-radius: 16px;
}

input[type=radio]:after{
    content: ''; position: absolute; width: 8px;height:8px;display: block; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;background: #00ccde;-webkit-border-radius:8px;-moz-border-radius: 8px; border-radius: 8px;
    -webkit-transform: scale(0); -moz-transform: scale(0);transform: scale(0);

    -webkit-transition : all ease-in-out 100ms;-moz-transition : all ease-in-out 100ms;
    transition : all ease-in-out 100ms;}
input[type=radio]:checked:after{-webkit-transform: scale(1);-moz-transform: scale(1); transform: scale(1);
}