체크박스 디자인바꾸기/checkbox 디자인/라디오버튼 디자인/radio button > html

본문 바로가기

html

체크박스 디자인바꾸기/checkbox 디자인/라디오버튼 디자인/radio button

페이지 정보

작성자 서방님 댓글 0건 조회 9회 작성일 18-10-30 16:49

본문

요즘 홈페이지 만들때 그냥 기본 체크박스 쓰지 않죠~~
좋은 링크를 가져왔어요!링크타고 들어가시면 준비물이 있어요!
준비물:체크/라디오박스에 사용할 이미지2개(체크된상태,체크안된상태)

▲링크에 상세히 설명되있어요

저도 한번 만들어봤는데요~ 약간 달라요!
준비물:체크된 이미지 1개
 




1. html구조
 

<div> class="agree"> <div class="all_agree"> <input type="checkbox" id="a1" name="전체동의" /> <label for="a1"><span>전체약관동의</span></label> </div><!-- .all_agree --> </div><!-- .agree -->

<label>안에 for를 쓰는 이유는 for값과 같은 체크박스 id값을 연결해주는 역할을 해요~
안해줘도 돌아가긴하지만 웹접근성에 맞추기위해 쓴답니다. 모바일을 사용할때도 편한게
<label>에 쓴 글자를 클릭하면 연결된 checkbox/radio에 체크되기 때문이에요~! 손가락 굵으신 분들한테도 좋겠죠?ㅋㅋㅋ

2. css
 

.agree .all_agree input[type="checkbox"] {display: none;}

css에서 checkbox를 숨겨줍니다. 대신 <label>에 스타일을 적용할꺼에요ㅎㅎ


3. 체크안된 상태에 배경넣기

.agree .all_agree input[type="checkbox"] {display: none;} .agree .all_agree input[type="checkbox"] + label { display: inline-block; width:17px; height: 17px; background: #fa3062; cursor: pointer; border-radius: 3px;float: right;} .agree .all_agree:after {display:block; clear:both; content:"";}


4. 체크된 상태에 배경넣기

.agree .all_agree input[type="checkbox"]:checked + label { background:url(../images/check.png) #fa3062 no-repeat center/10px 10px; float: right}

잘보고 입력하세용!3번이랑 다른거에요~~ㅎㅎ


5. span안에 내용 위치 이동
 

.agree {position:relative;} .agree .all_agree input[type="checkbox"] + label span { position: absolute; top: 0; left:0px; display: block; font-weight: bold;}

"전체약관 동의"를 체크박스 앞으로 가게 하기위해 포지션 앱솔루트로 조정하였어요^^;
그러면 디자인도 맞고 글자를 눌러도 체크박스가 선택되죠!


-전체 소스-

 

<div class="agree"> <div class="all_agree"> <input type="checkbox" id="a1" name="전체동의" /> <label for="a1"><span>전체약관동의</span></label> </div><!-- .all_agree --> </div><!-- .agree --> <ul> <li><input type="checkbox" id="a2" name="전체동의" /> <label for="a2"><span>이용약관동의 (필수)</span></label> </li> <li><input type="checkbox" id="a3" name="전체동의" /> <label for="a3"><span>개인정보수집이용 동의 (필수)</span></label> </li> <li><input type="checkbox" id="a4" name="전체동의" /> <label for="a4"><span>14세 이상 확인 (필수)</span></label> </li> </ul>
.agree ul {margin-top: 10px;} .agree ul li {margin-bottom: 15px;} .agree ul li:after {display:block; clear:both; content:"";} .agree ul li input[type="checkbox"] {display: none;} .agree ul li input[type="checkbox"] + label { width:17px; height: 17px; background

댓글목록

등록된 댓글이 없습니다.

Total 302건 1 페이지
게시물 검색

회원로그인

접속자집계

오늘
215
어제
282
최대
592
전체
37,313

그누보드5
Copyright © seobangnim.com All rights reserved.
자바스크립트를 활성화 하세요![ 브라우저에서 자바스크립트를 활성화하는 방법 ]