커스텀 checkbox, select 박스

썸네일

🚀 input checkbox, select 박스 커스텀하기

---

 

checkbox, select 둘의 브라우저 스타일은 너무나도 못생겼기에 커스텀하는 방법을 써보겠다.

 

1. checkbox 커스텀

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

 

 

자 이제 하나하나 뜯어보면 우선 input에 준 txt-hide가 중요한 키 포인트다. checkbox는 커스텀하기 어렵기 때문에 checkbox를 숨겨준 다음 label의 가상 클래스를 커스텀해서 꾸미는 방식으로 진행할 건데!! 여기서 키포인트 주로 알고 있는 방법으로는 display: none을 줘서 숨기는 방법이 있을 텐데 이는 접근성 측면에서 좋지 않은 방법이므로!!

.txt-hide {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

IR 기법을 활용해서 숨겨준다. 중요함

 

이다음은 사실 어렵지 않다. label에 ::before 가상 클래스를 사용 그곳에 이제 사용할 이미지를 넣어주면 끝이지만 이제 checked를 설명하겠다.

 

checked는 이제 숨겨놓은 input checkbox가 체크가 되면~ +(옆에 있는) label의 ::before 가상 클래스의 background 이미지를 저거로 바꾸겠다는 의미다. 이제 focus에 대해 이야기해볼 차례인데,, 후 사실 못생긴 거 인정하지만 디자이너분 입장에선 뒷목 잡고 쓰러지시겠지만 어쩌겠어,, 난 프런트엔드인걸 ㅜㅜ 디자이너님 봐주세요.

 

focus 했을 때 outline을 준 이유는 우선 outline은 border와 다르게 layout을 해치지 않는다. 그리고 이제 버튼을 클릭을 했을 때나, tab키를 눌러서 focus 했을 때 그 버튼이 focusing 됐다는 것을 알려주기 위해서 사용감 측면에서 outline을 줬지만 아 물론 예쁘게 커스텀 가능합니다 ㅎㅎ border-radius를 주면 동글동글해지기도 하고~~ 색고 줄 수도 있고~~ offset을 줄여주면 딱 붙기도 하고~~ 얼마든지 예뻐질 수는 있다(없는 게 가장 이쁨). 

 

조금 어떻게 보면 대충? 커스텀했지만 잘 사용한다면 얼마든지 이쁘게 커스텀 가능하다 저렇게 이미지 말고 직접 CSS로 해보는 것도 가능하다는 사실!!

 

2. select 커스텀

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen .

 

select는 나의 예쁜 코드로 한 번 설명해 보겠다 ㅋㅋ 우선 button을 하나 주고 버튼을 클릭하면 ul이 나오게끔 설정했다. 먼저 클릭할 button을 만들고 option들은 ul > li로 만들면 된다. 사실 뭐라 설명할 것은 없지만,, 이런 유의 위젯들은 article을 사용한 다음 h2를 줘서 주제를 적어둔 뒤 h2를 숨기는 것이 좋은 방법이다. 모듈화!! 아주 좋은 방법이다.

 

그리고 한 가지 주의할 점은 나는 display: none을 쓰지 않고 opacity: 0를 사용했는데 이는 display: flex로 중앙 정렬을 했기 때문에 display: none을 줘버리면 wrapper가 ul을 인식하지 못해서 가운데 정렬을 한 상태에서 ul이 나타나면 ul만큼 거리가 밀리게 된다. 이상해짐 그래서 opacity를 줘서 아래 공간을 wrapper가 인식하게 했다. 근데 뭘 주의해야 함?? 할 수 있지만 이제 보통의 nav바 같은 경우는 아래에 내용이 있는 경우가 많다. 즉, ul이 차지하고 있는 공간에 내용이 있어야 하는데 opacity: 0을 주게 되면 아래에 있는 콘텐츠들이 밀려나게 되기 때문에 그때는 display: none을 사용하는 것이 좋다.