Home

티스토리 비밀 글 체크박스(checkbox) 이미지로 꾸미기


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으로 다시 입력해 주셔야 합니다.


체크 박스 병경에 대한 자세한 설명은 이전글은 [블로그] - 티스토리 댓글 & 방명록 비밀글 체크박스 디자인에서 확인 가능 합니다.


more

댓글을 달아 주세요

  1. 2014.03.05 18:59 신고
    원래 있던 체크박스를 없애는 것 까지는 성공했는데
    그 다음부터 알려주신 방법으로 똑같이해도 바꾸려고 하는 아이콘이 안나타나네요ㅠㅠㅠㅠ
    왜이런걸까요ㅜㅜ
    css시트에다가 올려주신거 그대로 복사해서 원하는 아이콘으로 주소만 바꿔서 붙였는데
    아무런 변화가 없습니다.ㅠㅠ
    • 2014.03.06 00:59 신고
      음..... 혹시 치환자 ##을 복사한 그대로 사용하셨다면 쉬프트+3으로 다시 입력해주셔야 하는데 글로서는 정확한 답변 드리기가 힘드네요..

.

Secret