CSS input [type="radio, checkbox"] custom

# input type="radio", type="checkbox" customizing

퍼블리싱을 하다보면 디자인이 된 input 을 종종 작업하게 됩니다.

오늘은 input[type="radio"], input[type="checkbox"] 커스터마이징에 대한 포스팅을 해볼까 합니다.

Result

이렇게 만들어볼거에요 : )

HTML

<!-- 라디오버튼_on -->

<input type="radio" id="on" name="radio" checked>

<label for="on">라디오버튼_on</label>

<!-- 라디오버튼_off -->

<input type="radio" id="off" name="radio">

<label for="off">라디오버튼_off</label>

- 웹접근성에 맞게, input 태그의 id 값과 label 태그의 for 값을 맞춰줍니다. 

   (이렇게 하면 label 태그를 클릭했을 때, input과 연결시킬 수 있어요!)

- input 태그의 name 값을 통일시켜서 같은 목적의 radio 버튼임을 명시해줍니다.

   (name 값을 맞춰주지 않으면, 각각 별개의 radio 버튼이 되어버려요)

CSS

.radio {

    visibility: hidden;

    position: absolute;

}

.radio + label {

    display: inline-block;

    margin-right: 15px;

    padding-left: 20px;

    font-size: 16px;

    color: #333333;

    background: url('/img/radio_off.png') left no-repeat;

    cursor: pointer;

}

.radio:checked + label {

    background: url('/img/radio_on.png') left no-repeat;

}

- radio{ position: absolute; } 의 값은 마크업, 혹은 디자인에 따라 absolute, relative 혹은  static(default 값)으로 조정이 필요합니다.

(상황에 맞게 작업해주셔야해요, 레이아웃이 깨질 수도 있어요!)

- 작업하시면서 radio 이미지 사이즈에 맞에 위치값들도 조정해주세요 : )

네. 이렇게 아주 간단히 input 커스텀을 해보았어요

input[type="checkbox"] 역시 radio 와 동일하게 작업해주시면 됩니다!

끝!