@keyframes check {0% {height: 0;width: 0;}
    25% {height: 0;width: 10px;}
    50% {height: 20px;width: 10px;}
  }
  .checkboxSpecial{background-color:#fff;display:inline-block;height:28px;margin:0 .25em;width:28px;border-radius:4px;border:1px solid #ccc;float:center}
  .checkboxSpecial span{display:block;height:28px;position:relative;width:28px;padding:0}
  .checkboxSpecial span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:3px;position:absolute;top:15px;width:10px}
  .checkboxSpecial span:hover:after{border-color:#999}
  .checkboxSpecial input{display:none}
  .checkboxSpecial input:checked + span:after{-webkit-animation:check .8s;-moz-animation:check .8s;-o-animation:check .8s;animation:check .8s;border-color:#555}
.checkboxSpecial input:checked + .default:after{border-color:#444}
.checkboxSpecial input:checked + .primary:after{border-color:#2196F3}
.checkboxSpecial input:checked + .success:after{border-color:#8bc34a}
.checkboxSpecial input:checked + .info:after{border-color:#3de0f5}
.checkboxSpecial input:checked + .warning:after{border-color:#FFC107}
.checkboxSpecial input:checked + .danger:after{border-color:#f44336}