input 체크박스/라디오 스타일 커스텀 하기, 꾸미는 법

🤚일단

기본 스타일에 체크될때의 색상만 변경하는 방법이 있습니다. (기본값은 blue 입니다.)

아예 커스텀 제작으로만 사용해서 저도 얼마전에 알았습니다.

 

css

input {
  accent-color: #000;
}

결과

See the Pen Untitled by 김보라 (@etbeatbh-the-bashful) on CodePen.

 

 

1. 체크박스 스타일 변경 (이미지사용)

- 이미지 준비 (기본,체크된,기본비활성화,체크된비활성화)

 

html

        <!-- 기본 체크박스 -->
        <label class="label">
            <span class="alignBox">
                <input type="checkbox" class="checkbox">
                <span class="checkboximg"></span>
                <span class="inputTxt">체크박스</span>
            </span>
        </label>
        <!-- 체크된 체크박스 -->
        <label class="label">
            <span class="alignBox">
                <input type="checkbox" checked class="checkbox">
                <span class="checkboximg"></span>
                <span class="inputTxt">체크박스</span>
            </span>
        </label>
        <!-- 비활성화된 체크박스 -->
        <label class="label">
            <span class="alignBox">
                <input type="checkbox" disabled class="checkbox">
                <span class="checkboximg"></span>
                <span class="inputTxt">체크박스</span>
            </span>
        </label>
        <!-- 선택된 비활성화 체크박스 -->
        <label class="label">
            <span class="alignBox">
                <input type="checkbox" checked disabled class="checkbox">
                <span class="checkboximg"></span>
                <span class="inputTxt">체크박스</span>
            </span>
        </label>

css

.label {display: inline-block; position: relative;}
.alignBox {display: inline-flex; align-items: center;}
.inputTxt {display: inline-block; margin: 0 10px;}

.checkbox {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 0; height: 0;}
.checkboximg {width: 30px; height: 30px; background: url(./img/ck01.jpg) no-repeat center /30px;}
.checkbox:checked+.checkboximg {background: url(./img/ck02.jpg) no-repeat center /30px;}
.checkbox:disabled+.checkboximg {background: url(./img/ck03.jpg) no-repeat center /30px;}
.checkbox:checked:disabled+.checkboximg {background: url(./img/ck04.jpg) no-repeat center /30px;}

체크박스 커스텀 결과

See the Pen Untitled by 김보라 (@etbeatbh-the-bashful) on CodePen.

2. 라디오 박스 스타일 변경 (이미지 사용)

- 이미지 준비 (기본,체크된,기본비활성화,체크된비활성화)

: 구조와 사용방법은 체크박스와 동일합니다.

 

html

        <!-- 기본 라디오버튼 -->
        <label class="label">
            <span class="alignBox">
                <input type="radio" class="radio">
                <span class="radioimg"></span>
                <span class="inputTxt">라디오버튼</span>
            </span>
        </label>
        <!-- 체크된 라디오버튼 -->
        <label class="label">
            <span class="alignBox">
                <input type="radio" checked class="radio">
                <span class="radioimg"></span>
                <span class="inputTxt">라디오버튼</span>
            </span>
        </label>
        <!-- 비활성화된 라디오버튼 -->
        <label class="label">
            <span class="alignBox">
                <input type="radio" disabled class="radio">
                <span class="radioimg"></span>
                <span class="inputTxt">라디오버튼</span>
            </span>
        </label>
        <!-- 선택된 비활성화 라디오버튼 -->
        <label class="label">
            <span class="alignBox">
                <input type="radio" checked disabled class="radio">
                <span class="radioimg"></span>
                <span class="inputTxt">라디오버튼</span>
            </span>
        </label>

 

css

.label {display: inline-block; position: relative;}
.alignBox {display: inline-flex; align-items: center;}
.inputTxt {display: inline-block; margin: 0 10px;}

.radio {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 0; height: 0;}
.radioimg {width: 30px; height: 30px; background: url(./img/radio01.png) no-repeat center /30px;}
.radio:checked+.radioimg {background: url(./img/radio02.png) no-repeat center /30px;}
.radio:disabled+.radioimg {background: url(./img/radio03.png) no-repeat center /30px;}
.radio:checked:disabled+.radioimg {background: url(./img/radio04.png) no-repeat center /30px;}

라디오버튼 커스텀 결과

 

See the Pen custom input radiobox image by 김보라 (@etbeatbh-the-bashful) on CodePen.

 

➡️ 스위치 버튼 만들기