라디오버튼, 체크박스 스타일 지정 방법
form 속성들은 직접적으로 스타일을 입히는게 제한적이다.
오늘은 radio checkbox에 style입히기 방법 중 가장 간단한 방법을 하나 소개한다.
javascript의 처리 없이도 숨겨진 체크박스나 라디오버튼은 label에 감싸져 있어서 토글된다.
checked속성과 바인딩된 ico클래스로 이미지를 제어한다.
form 속성들은 직접적으로 스타일을 입히는게 제한적이다.
오늘은 radio checkbox에 style입히기 방법 중 가장 간단한 방법을 하나 소개한다.
HTML
<label class="check">
<input type="checkbox" name="">
<span class="ico"></span>
<span class="txt">선택내용</span>
</label>
<label class="radio">
<input type="radio" name="">
<span class="ico"></span>
<span class="txt">선택내용</span>
</label>CSS
.check {overflow:hidden;display:inline-block;position:relative;height:26px;box-sizing:border-box;cursor:pointer;}
.check input {overflow:hidden;display:none;width:0px;height:0px;border:0 none;font-size:0;line-height:0;clip:rect(0 0 0 0);opacity:0;}
.check .ico {position:absolute;left:0px;top:0;width:26px;height:26px;background:url("이미지명") no-repeat 0 0;}
.check .txt {display:inline-block;padding-left:36px;font-size:16px;color:#333;}
.check input:checked + .ico {background-position:0 -40px;}/* 체크됐을때, 이미지변경 */
/* 라디오버튼공통 */
.radio {overflow:hidden;display:inline-block;position:relative;height:26px;box-sizing:border-box;cursor:pointer;}
.radio input {overflow:hidden;display:none;width:0px;height:0px;border:0 none;font-size:0;line-height:0;clip:rect(0 0 0 0);opacity:0;}
.radio .ico {position:absolute;left:3px;top:3px;width:20px;height:20px;background:url("이미지명") no-repeat 0 0;}
.radio .txt {display:inline-block;padding-left:30px;font-size:16px;color:#333;}
.radio input:checked + .ico {background-position:0 -40px;}/* 체크됐을때, 이미지변경 */javascript의 처리 없이도 숨겨진 체크박스나 라디오버튼은 label에 감싸져 있어서 토글된다.
checked속성과 바인딩된 ico클래스로 이미지를 제어한다.
