체크박스를 버튼처럼 만들어보자

왜 가끔 그런거 있다. 여러개(혹은 하나)를 선택하는 선택지인데 버튼같이 생긴 거. 그럼 이건 체크박스거나 라디오 버튼이라는 얘기인데, 이걸 체크박스로 만들 수 있나?

 

를 해볼거다. 이건 뭐 

---

<div class="wrapper">
  <input type="checkbox" id="checkbox1" name="pringles">
</div>

일단 체크박스를 만들고 

 

input[type="checkbox"] {
  width: 100px;
  height: 33px;
  appearance: none;
  background-color: #ffffff;
  color: #000000; 
  border: 1px solid #000000;
}

input[type="checkbox"]:checked {
  background-color: #000000;
  color: #ffffff;
}

appearance: none;을 줘서 기존의 네모 상자를 없애면 이런 식으로 커스터마이징이 가능하다. 그럼 안에 글자는요?

 

input[type="checkbox"]:before {
  content: "프링글스 오리지날";
}

나는 이렇게 줬다. :before 쓴 다음 콘텐츠에 이렇게 주면 버튼 안에 글자가 들어간다. 참고로 선택시에도 따로 줄 필요는 없다.

 

input[type="checkbox"] {
  width: 220px;
  height: 45px;
  font-size: 12pt;
  appearance: none;
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
  margin: 10px;
  padding: 6px;
  border-radius: 10px;
}

.original {
  background-color: #ffffff;
  color: #cc0000;
  border: 1px solid #cc0000;
}

.original:checked {
  background-color: #cc0000;
  color: #ffffff;
}

.original:before {
  content: "프링글스 오리지날";
}

.sourcream {
  background-color: #ffffff;
  color: #58bf6d;
  border: 1px solid #58bf6d;
}

.sourcream:checked {
  background-color: #58bf6d;
  color:#ffffff;
}

.sourcream:before {
  content: "프링글스 사워크림&어니언";
}

.cheese { 
  background-color: #ffffff;
  color: #ef901b;
  border: 1px solid #ef901b;
}

.cheese:checked {
  background-color: #ef901b;
  color: #ffffff;
}

.cheese:before {
  content: "프링글스 치지치즈";
}

.hot { 
  background-color: #ffffff;
  color: #3a2c28;
  border: 1px solid #3a2c28;
}

.hot:checked {
  background-color: #3a2c28;
  color: #ffffff;
}

.hot:before {
  content: "프링글스 핫&스파이시";
}

.galbi { 
  background-color: #ffffff;
  color: #74a8bd;
  border: 1px solid #e99b55;
}

.galbi:checked {
  background-color: #e99b55;
  color: #ffffff;
}

.galbi:before {
  content: "프링글스 한국식 숯불갈비";
}

버튼이 다섯개... 

 

See the Pen checkbox button by koreanraichu (@koreanraichu) on CodePen.

맛별로 체크박스 색깔이 다 다르다. 이것때문에 CSS가 늘어난거임…