CSS - input 체크박스 테두리 스타일 변경하기

 

 

요즘 새발자는 UI 를 열심히 하고 있다. (쑥쑥 무럭무럭자라라)

input 의 기본 체크박스 안의 테두리 스타일을 변경하는 미션을 맡아 그 기록을 남겨보았다.

(미래의 나는 여전히 해멜 것을 알기에... )

자 그럼 시작해보자 !

 

결과화면 미리보기

일단 구현된 결과물이다. 기본 체크박스는 테두리가 회색으로 되어있다.

하지만 나는 테두리가 없는 깔끔한 디자인을 구현하였다.

 

체크 전

체크 후

 

 

---

JavaScript - CSS input 체크박스 테두리 스타일 변경하기

 

현실은 css 에서 바로 변경이 안된다. 😭

after 속성을 사용하여 현실에서는 적용이 안되는 가상의 스타일을 지정해주자.

HTML

<input type="checkbox" />

 

CSS

** 참고로 IE 는 appearance 속성이 안먹었던 기억이 가물가물하게 나니, 혹시 IE 구버전 대응을 해야한다면 참고하자. 👵

 

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  height: 16px;
  outline: 0;
  width: 16px;
}
input[type="checkbox"]::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: '';
  display: none;
  height: 40%;
  left: 40%;
  position: relative;
  top: 20%;
  transform: rotate(45deg);
  width: 15%;
}
input[type="checkbox"]:checked {
  background: #505bf0;
}
input[type="checkbox"]:checked::after {
  display: block;
}

 

 

 

 

 

ref: https://stormcrow.dev/ko/questions/4148499