2013. 7. 26. 14:10ㆍ카테고리 없음
checkBox나 Radio 속성을 가진 Input 태그를 css를 사용하여 버튼(Button) 모양으로 바꾸는 방법입니다.
<input type="radio" name ="ggari" id ="ggari" value="" />
<input type="checkbox" name ="ggari" id ="ggari" value="" />
예제 소스
<!DOCTYPE HTML>
<html lang="ko">
<head>
<title>타이틀(CSS)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div label input {
margin-right:100px;
}
#ck-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button label {
float:left;
width:4.0em;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
}
#ck-button label input {
position:absolute;
top:-20px;
}
#ck-button input:checked + span {
background-color:#911;
color:#fff;
}
</style>
</head>
<body>
<!--기본(디폴트 폼)-->
<div>
<input type="radio" name="ggari" id="ggari" value="1" checked><span>radio_1</span>
<input type="radio" name="ss" id="ss" value="1"><span>radio_1</span>
<input type="checkbox" name="ggari1" id="ggari1" value="3" checked><span>check_1</span>
<input type="checkbox" name="sss" id="sss" value="3"><span>check_1</span>
</div>
<!--기본(디폴트)-->
<!--변경(Changed form)-->
<div>
<div id="ck-button">
<label>
<!-- 라디오 -->
<input type="radio" name="ggari" id="ggari" value="1" checked><span>radio_1</span>
</label>
</div>
<div id="ck-button">
<label>
<input type="radio" name="ggari" id="ggari" value="2"><span>radio_2</span>
</label>
</div>
<div id="ck-button">
<label>
<!-- 체크 -->
<input type="checkbox" name="ggari1" id="ggari1" value="3" checked><span>check_1</span>
</label>
</div>
<div id="ck-button">
<label>
<input type="checkbox" name="ggari1" id="ggari1" value="3"><span>check_2</span>
</label>
</div>
</div>
<!--변경(Changed form)-->
</body>
</html>
실행결과
