[활용팁] 초심자를 위한 css로 체크박스 꾸미기
작성자 정보
- 관리자 작성
- 작성일
컨텐츠 정보
- 411 조회
-
목록
본문
별건 아니고 체크박스 꾸미기에요
어느분께서 제 홈피에서 여쭤보시길래 요기다가 적어놓고 가요
보통 체크박스가 아래처럼 되어있는데
그냥 일반 체크박스를 아래처럼 아이콘이나 그림으로 교체해본거에요
적용한부분은 비밀댓글에다 했지만, 사용자 의도에 따라서 체크박스가 나오는 다양한곳에다가 적용할수가 있어요!
댓글쪽으로 테스트를 해보는데
댓글은 보통 아래처럼 되어있으니깐 자기가 원하는곳에서 테스트를 해보심될거에요
view_comment.page.skin.php - 페이징 쓰시는분
view_comment.skin.php - 일반 댓글
비밀글
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. 스타일에서 클래스 내용을 적어준다
체크박스 나오는곳은 다 써먹을수 있으니깐요!
구글 검색하다보면 라디오버튼이든 셀렉트박스든 다양한 종류들이 많이 나와요!
저 같은경우는 체크박스를 아래처럼 응용해서 바꿨어요~
쓰잘때기 없는거긴 한데..필요하신분이 계시다면 한번 응용해보시면 더 좋고 재미난걸 연출할수가 있어요!
관련자료
-
링크