input checkbox, radio 디자인

See the Pen input checkbox 디자인 by publisher-jy (@publisher-jy) on CodePen.

 

 

//scss 용,,
&__chk {
  position: relative;
  input[type="checkbox"]{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
  input[type="checkbox"] + label{display: inline-block; position: relative; padding-left: 32px; cursor: pointer; }
  input[type="checkbox"] + label:before{content:''; position: absolute; left: 0; top: -3px; width: 22px; height: 22px; text-align: center; background:#fff; border: 2px solid #B9DEFF; box-sizing: border-box; }
  input[type="checkbox"]:checked + label:after{content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; background-color: #B9DEFF;}
}