초심자를 위한 css로 체크박스 꾸미기

보통 체크박스가 아래처럼 되어있는데

 

 

그냥 일반 체크박스를 아래처럼 아이콘이나 그림으로 교체해본거에요

 

 

 

 

적용한부분은 비밀댓글에다 했지만, 사용자 의도에 따라서 체크박스가 나오는 다양한곳에다가 적용할수가 있어요!

 

 

 

댓글쪽으로 테스트를 해보는데

 

댓글은 보통 아래처럼 되어있으니깐 자기가 원하는곳에서 테스트를 해보심될거에요

 

view_comment.page.skin.php - 페이징 쓰시는분

view_comment.skin.php - 일반 댓글

 

 

php를 열어서 찾다보면

 

보통 아미나는 아래처럼 <input type="checkbox" 코드가 되어있거든요

 

?

1	<label class="checkbox-inline"><input type="checkbox" name="wr_secret" value="secret" id="wr_secret"> 비밀글</label>

 

이 부분에서 <input type="checkbox" 가 들어가는 코드만 그냥 두고, 뒤에 진한글씨를 추가해주면 되요

위 코드를 아래코드로 교체해보죠!

 

?

1	<input type="checkbox" name="wr_secret" value="secret" id="wr_secret"><b><label for="wr_secret" class="secret_on"></label></b>

 

내용인즉, wr_secret 부분에 class="secret_on" 를 적용하겠다~~ 요말이에요

class="secret_on" 이 부분에서 secret_on는 제 멋대로 지은거니 따라하실필요는 없어요 자기 임의대로 짓는거니깐요

 

물론! css 부분에다가도 자기가 바꾼 이름으로 설정해줘야겠죠!

 

자 코드를 교체했으니 한가지를 더 해줘야 해요!

 

 

 

view.css 에서 맨 아래다가 아래 스타일을 추가해줘요!

 

################################

 

/* 체크박스 꾸미기 */

 

      label.secret_on:before {

        content: "\f09c";

        font-family: "FontAwesome";

        font-weight: normal;

 font-size:20px;

      

        color: #cbcbcb;

        position: relative;

        top: 5px;

        padding: 10px 12px;

cursor: pointer;

      }

 

      input#wr_secret:checked + label.secret_on:before {

        content: "\f13e";

  font-size:20px;

        color: #5ea98b;

        position: relative;

        top: 5px;

        padding: 10px 12px;

cursor: pointer;

      }

 

      input#wr_secret {

        display: none;

      }

 

 

################################

 

저는 secret_on로 클래스명을 했기때문에

label.secret_on:before 처럼 라벨명칭을 제가 지은 이름으로 넣었어요! 두곳이나 넣어야해요! 클릭전과 클릭후상황이니깐요

 

그리고 위 코드에서 저는 폰트어썸을 쓰기위해

font-family: "FontAwesome";를 설정해준뒤

content: 부분에 폰트어썸 유니코드를 넣어줬어요! 저 자물쇠의 유니코드죠! 폰트어썸 홈피에 가시면 유니코드가 다 있으니 알아서!

 

만일 폰트어썸 안쓰겠다 글씨로 쓰겠다 하시면

content: " 난글씨로";

글로 넣으심 되겠죠

 

위치나 클릭영역때문에

        position: relative;

        top: 5px;

        padding: 10px 12px;

이걸로다가 적용했어요 top이나 padding으로 영역을 맞추심되려나요?

 

마지막으로 기존의 버튼은 숨겼어요

input#wr_secret 이 부분을 

      input#wr_secret {

        display: none;

      }

요로코롬

 

 

 

요약: 

 

1. 체크박스 input에 라벨클래스를 추가해준다

2. 스타일에서 클래스 내용을 적어준다

 

 

체크박스 나오는곳은 다 써먹을수 있으니깐요!

구글 검색하다보면 라디오버튼이든 셀렉트박스든 다양한 종류들이 많이 나와요!

 

저 같은경우는 체크박스를 아래처럼 응용해서 바꿨어요~

 

 

 

 

쓰잘때기 없는거긴 한데..필요하신분이 계시다면 한번 응용해보시면 더 좋고 재미난걸 연출할수가 있어요!