input.custom-color{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid #d9dadc;border-radius:50px;box-shadow:inset -20px 0 0 0 #fff;height:30px;outline:none;position:relative;transition-duration:.2s;width:50px}input.custom-color:after{background-color:transparent;border-radius:50%;box-shadow:2px 4px 6px rgba(0,0,0,.2);content:"";height:26px;left:1px;position:absolute;top:1px;width:26px}input.custom-color:checked{box-shadow:inset 20px 0 0 0}input.custom-color:checked:after{box-shadow:-2px 4px 3px rgba(0,0,0,.05);left:20px}
|