CSS 체크박스 라디오 커스텀 디자인

HTML 태그 중 input checkbox, radio는 기본적인 디자인은 매우 심플하게 보여진다.

브라우저에 따라 다소 차이는 있지만, 사이트의 디자인이나 컨셉에 따라 디자인을 변경해야 하는 경우가 있다.

하지만 기본적으로 input을 직접 css로 바꾸는데에는 한계가 있기 때문에 label을 이용한다.

 

input 체크박스와 라디오 태그는 지난번 글에서 설명했는데, 아직 checkbox나 radio가 궁금하다면 아래 링크를 타고 봐도 좋을 것 같다.

 

2024.03.26 - [IT/HTML & CSS] - HTML 체크박스(checkbox) 만들기 input checked 속성

HTML 체크박스(checkbox) 만들기 input checked 속성

반응형

2024.03.26 - [IT/HTML & CSS] - HTML 라디오(radio) 만들기 input checked 속성

HTML 라디오(radio) 만들기 input checked 속성

 

체크박스 디자인 하는 이유

체크박스를 디자인하는 이유는 사용자 경험을 향상시키고 시각적으로 더 매력적으로 만들기 위함이다.

1. 각적 일관성: 웹 페이지나 앱에서 일관된 디자인 패턴을 유지하는 것은 사용자에게 일관된 경험을 제공한다.  따라서 체크박스를 기본 스타일에서 사용자 정의하여 웹 페이지나 앱의 전반적인 디자인과 일치시키는 것이 중요하다.
2. 사용자 경험 향상: 사용자는 시각적으로 더 잘 구별되고 조작할 수 있는 디자인 요소를 좋아 한다. 체크박스를 디자인함으로써 사용자가 해당 요소를 쉽게 발견하고 상태를 인식할 수 있도록 하게 해준다.
3. 브랜드 적합성: 웹 페이지나 앱의 브랜드에 맞는 디자인을 적용하는 것은 중요하다. 따라서 체크박스도 브랜드의 색상, 스타일 및 디자인 가이드에 맞게 사용자 정의 할 수 있다.
4. 접근성 향상: 접근성은 모든 사용자가 웹 페이지나 앱을 쉽게 이용할 수 있도록 하는 것을 의미한다. 따라서 체크박스의 크기, 색상, 텍스트 등을 조정하여 시각 및 운동 장애를 가진 사용자도 포함하여 모든 사용자가 쉽게 사용할 수 있도록 하는 것이 중요하다.

체크박스 디자인 하기

<div>
  <input id="check" type="checkbox">
  <label class="checkbox-label" for="check">체크 박스</label>
</div>

 

먼저 체크박스를 생성해 주기 위해 간단히 html을 작성해 준다.

(라디오 박스가 필요하신 분들은 라디오 버튼으로 해도 같은 결과가 나옵니다.)

 

체크박스를 디자인 하기 위해서는 label의 for 속성이 필요하다.

지난번의 글에서 label의 for속성과 input의 id값을 두개를 연결 시키면, label클릭 시, checkbox의 checked를 활성화 시킬 수 있다.

 

input[type="checkbox"]{
  display: none;
}
input[type="checkbox"] + label{
  display: inline-block;
  position: relative;
  padding-left:30px;
}
input[type="checkbox"] + label::before{
  display:block;
  content:'';
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height:20px;
  text-align: center;
  position: absolute;
  left: 0;
  top:0;
  border:1px solid #ddd;
  color:blue;
}

input[type="checkbox"]:checked + label::before{
  content:'✔';
}

 

위의 CSS를 살펴보면 checkbox를 display 값을 none으로 숨겨주고, label을 디자인 하는 것이다.

before속성을 이용하여, 체크박스를 디자인 해주고, label에는 원하는 텍스트를 넣는 방식이다.

필자는 CSS의 input[type="checkbox"]:checked를 활용하여 체크박스가 checked가 됐을 때 content 값을 바꿔 주었다.

background-image로 하면 더 자유로운 디자인을 사용 할 수 있다.

최종 코드

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

 

체크박스를 디자인하는 것은 사용자 경험을 개선하고 일관성을 유지하며 브랜드를 강화하는 등 다양한 이유로 중요하다.

 

오늘의 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다.