csscheckbox.com 사이트에서 제공하는 이미지를 이용하여 비밀 글 체크 박스 변경하는 방법입니다.
이미지 없이 체크 박스 변경하는 방법.
이전 글 : 댓글 & 방명록 비밀글 체크박스 디자인
http://csscheckbox.com/ 사이트에서 제공하는 이미지들입니다. 사이트에 가서 직접 다운 받아서 사용할 수도 있고 코드를 확인하고 복사하여 몇 가지만 수정 후 바로 적용하여 사용할 수도 있습니다.
background-image:url(http://csscheckbox.com/checkboxes/lite-green-check.png) background-image:url(http://csscheckbox.com/checkboxes/lite-blue-check.png) background-image:url(http://csscheckbox.com/checkboxes/lite-gray-check.png) background-image:url(http://csscheckbox.com/checkboxes/lite-cyan-check.png) background-image:url(http://csscheckbox.com/checkboxes/lite-orange-check.png) background-image:url(http://csscheckbox.com/checkboxes/lite-red-check.png) background-image:url(http://csscheckbox.com/checkboxes/lite-x-cyan.png) background-image:url(http://csscheckbox.com/checkboxes/lite-x-gray.png) background-image:url(http://csscheckbox.com/checkboxes/lite-x-blue.png) background-image:url(http://csscheckbox.com/checkboxes/lite-x-orange.png) background-image:url(http://csscheckbox.com/checkboxes/lite-x-red.png) background-image:url(http://csscheckbox.com/checkboxes/lite-x-green.png) background-image:url(http://csscheckbox.com/checkboxes/mac-style.png) background-image:url(http://csscheckbox.com/checkboxes/mario-style.png) background-image:url(http://csscheckbox.com/checkboxes/alert-style.png) background-image:url(http://csscheckbox.com/checkboxes/lite-plus.png) background-image:url(http://csscheckbox.com/checkboxes/dark-plus.png) background-image:url(http://csscheckbox.com/checkboxes/dark-plus-cyan.png) background-image:url(http://csscheckbox.com/checkboxes/dark-plus-orange.png) background-image:url(http://csscheckbox.com/checkboxes/dark-check-cyan.png) background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png) background-image:url(http://csscheckbox.com/checkboxes/dark-check-orange.png) background-image:url(http://csscheckbox.com/checkboxes/depressed-lite-small.png) background-image:url(http://csscheckbox.com/checkboxes/elegant.png) background-image:url(http://csscheckbox.com/checkboxes/depressed.png) background-image:url(http://csscheckbox.com/checkboxes/chrome-style.png) background-image:url(http://csscheckbox.com/checkboxes/web-two-style.png) background-image:url(http://csscheckbox.com/checkboxes/vlad.png) background-image:url(http://csscheckbox.com/checkboxes/klaus.png)
이미지 주소들 입니다. 주소를 따라가면 이미지 확인이 가능하고 우 클릭으로 다운 받아서 자신의 블로그에 이미지를 등록 시켜 놓고 사용하셔도 되고 링크 걸어서 사용해도 됩니다.
티스토리에 파일 업로드 하고 적용은 background-image:url(images/Checkbox.png); 입니다.
티스토리 블로그 적용 코드
<input class="checkbox" id="[##_guest_input_is_secret_##]" name="[##_rp_input_is_secret_##]" type="checkbox"/> <label for="[##_guest_input_is_secret_##]" class="secret">Secret</label>
<input class="checkbox" id="[##_rp_input_is_secret_##]" name="[##_rp_input_is_secret_##]" type="checkbox"/> <label for="[##_rp_input_is_secret_##]" class="secret">Secret</label>
input[type=checkbox] { display:none; } input[type=checkbox].checkbox + label.secret { padding-left:20px; height:20px; display:inline-block; line-height:20px; background-repeat:no-repeat; font-size:15px; vertical-align:middle; cursor:pointer; } input[type=checkbox].checkbox:checked + label.secret { background-position: 0 -20px; } .secret{ background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png); }
티스토리에 쉽게 적용 가능하게 수정한 코드입니다. Ctrl + F 검색 기능으로 ##_guest_input_is_secret_## 치환자들을 검색하시면 쉽게 찾아 적용할 수 있습니다. 더블 클릭 하여 복사해 가시면 되고 ## 코드는 쉬프트 + 3으로 다시 입력해 주셔야 합니다.
체크 박스 병경에 대한 자세한 설명은 이전글은 [블로그] – 티스토리 댓글 & 방명록 비밀글 체크박스 디자인에서 확인 가능 합니다.