실전퍼블리싱(라디오버튼과 체크박스를 커스텀 체크박스로 스타일링)

라디오버튼과 체크박스를 커스텀 체크박스로 스타일링

배경이미지를 사용하여 라디오버튼과 체크박스를 커스텀 체크박스로 스타일링

예제보기

HTML

  <div class="container">
    <div class="custom1">
      <h1>Basic Checkbox & Radio Button</h1>
      <input type="checkbox" id="chk1"><label for="chk1">동의합니다.</label>
      <input type="radio" name="gender" id="male"><label for="male">남성</label>
      <input type="radio" name="gender" id="female"><label for="female">여성</label>
    </div>
    
    <div class="custom2">
      <h1>Custom Checkbox01</h1>
      <input type="checkbox" id="chk2-1">
      <label for="chk2-1"><em></em>동의합니다.</label>
      <input type="checkbox" id="chk2-2">
      <label for="chk2-2"><em></em>동의합니다.</label>
    </div>
    
    <div class="custom3">
      <h1>Custom Checkbox02</h1>
      <input type="checkbox" id="chk3-1">
      <label for="chk3-1"><em></em>동의합니다.</label>
      <input type="checkbox" id="chk3-2">
      <label for="chk3-2"><em></em>동의합니다.</label>
    </div>
    
    <div class="custom4">
      <h1>Custom Radio</h1>
      <input type="radio" name="school" id="school-chk1">
      <label for="school-chk1"><em></em>초등학생</label>
      <input type="radio" name="school" id="school-chk2">
      <label for="school-chk2"><em></em>중학생</label>
      <input type="radio" name="school" id="school-chk3">
      <label for="school-chk3"><em></em>고등학생</label>
      <input type="radio" name="school" id="school-chk4">
      <label for="school-chk4"><em></em>대학생</label>
    </div>
  </div>

CSS

/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');


body {
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
  color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
a {
  text-decoration: none;
  color: #222;
}
.container div label {
  cursor: pointer;
}
.custom1,
.custom2,
.custom3{
  padding-bottom: 30px;
  border-bottom: 1px solid #999;
}
.custom2 input[type=checkbox],
.custom3 input[type=checkbox],
.custom4 input[type=radio] {
  display: none;
}
.custom2 label,
.custom3 label {
  position: relative;
  display: block;
}
.custom2 label em,
.custom3 label em,
.custom4 label em {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
  background-position: left center;
}
.custom2 label[for=chk2-1] em {
  background: url('../images/checkbox-01.png') no-repeat;
}
.custom2 label[for=chk2-2] em {
  background: url('../images/checkbox-02.png') no-repeat;
}
.custom3 label[for=chk3-1] em {
  background: url('../images/checkbox-03.png') no-repeat;
}
.custom3 label[for=chk3-2] em {
  background: url('../images/checkbox-04.png') no-repeat;
}
.custom4 label em {
  background: url('../images/radio-01.png') no-repeat;
}
.custom2 input[type=checkbox]:checked + label em,
.custom3 input[type=checkbox]:checked + label em,
.custom4 input[type=radio]:checked + label em {
  background-position: right center;
}
.custom4 input[type=radio]:checked + label {
  color: crimson;
}