체크박스 디자인바꾸기/checkbox 디자인/라디오버튼 디자인/radio button
페이지 정보
작성자 서방님 댓글 0건 조회 327회 작성일 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
관련링크 (출처)
댓글목록
등록된 댓글이 없습니다.
