单复选框（自定颜色）

HTML

<input class="inp-cbx" id="morning" type="checkbox" style="display: none;">  
<label class="cbx" for="morning"><span>  
  <svg width="12px" height="10px">  
    <use xlink:href="#check"></use>  
  </svg>  </span><span>Morning</span></label>  
<input class="inp-cbx" id="noon" type="checkbox" style="display: none;">  
<label class="cbx" for="noon"><span>  
  <svg width="12px" height="10px">  
    <use xlink:href="#check"></use>  
  </svg>  </span><span>Noon</span></label>  
<input class="inp-cbx" id="afternoon" type="checkbox" style="display: none;">  
<label class="cbx" for="afternoon"><span>  
  <svg width="12px" height="10px">  
    <use xlink:href="#check"></use>  
  </svg>  </span><span>Afternoon</span></label>  
<input class="inp-cbx" id="evening" type="checkbox" style="display: none;">  
<label class="cbx" for="evening"><span>  
  <svg width="12px" height="10px">  
    <use xlink:href="#check"></use>  
  </svg>  </span><span>Evening</span></label>  
<!--SVG Sprites-->  
<svg class="inline-svg">  
  <symbol id="check" viewbox="0 0 12 10">  
    <polyline points="1.5 6 4.5 9 10.5 1"></polyline>  
  </symbol>

CSS

   * {  
  box-sizing: border-box;  
}  
.cbx {  
  -webkit-user-select: none;  
  user-select: none;  
  cursor: pointer;  
  padding: 6px 8px;  
  border-radius: 6px;  
  overflow: hidden;  
  transition: all 0.2s ease;  
}  
.cbx:not(:last-child) {  
  margin-right: 6px;  
}  
.cbx:hover {  
  background: rgba(125,100,247,0.06);  
}  
.cbx span {  
  float: left;  
  vertical-align: middle;  
  transform: translate3d(0, 0, 0);  
}  
.cbx span:first-child {  
  position: relative;  
  width: 18px;  
  height: 18px;  
  border-radius: 4px;  
  transform: scale(1);  
  border: 2px solid #c8ccd4;  
  transition: all 0.2s ease;  
}  
.cbx span:first-child svg {  
  position: absolute;  
  top: 2px;  
  left: 1px;  
  fill: none;  
  stroke: #fff;  
  stroke-width: 2;  
  stroke-linecap: round;  
  stroke-linejoin: round;  
  stroke-dasharray: 16px;  
  stroke-dashoffset: 16px;  
  transition: all 0.3s ease;  
  transition-delay: 0.1s;  
  transform: translate3d(0, 0, 0);  
}  
.cbx span:last-child {  
  padding-left: 8px;  
  line-height: 18px;  
}  
.cbx:hover span:first-child {  
  border-color: #7d64f7;  
}  
.inp-cbx:checked + .cbx span:first-child {  
  background: #7d64f7;  
  border-color: #7d64f7;  
  animation: wave 0.4s ease;  
}  
.inp-cbx:checked + .cbx span:first-child svg {  
  stroke-dashoffset: 0;  
}  
body {  
  font-family: "Open Sans", sans-serif;  
  font-size: 16px;  
  -webkit-font-smoothing: antialiased;  
  text-rendering: optimizelegibility;  
  color: #223254;  
  min-height: 100vh;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
.inline-svg {  
  position: absolute;  
  width: 0;  
  height: 0;  
  pointer-events: none;  
  user-select: none;  
}  
@media screen and (max-width: 640px) {  
  body {  
    width: auto;  
    display: inherit;  
    padding: 20px;  
  }  
  .cbx {  
    width: 100%;  
    margin-bottom: 4px;  
    display: inline-block;  
  }  
}  
@-moz-keyframes wave {  
  50% {  
    transform: scale(0.9);  
  }  
}  
@-webkit-keyframes wave {  
  50% {  
    transform: scale(0.9);  
  }  
}  
@-o-keyframes wave {  
  50% {  
    transform: scale(0.9);  
  }  
}  
@keyframes wave {  
  50% {  
    transform: scale(0.9);  
  }  
}