스크립트를 이용하지 않고 css로만 사용
셀랙트박스 디자인
http://webdir.tistory.com/432
-----------------------------------------------------------------------------------------
/* 체크박스 */
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label {
color:#212127; /* 폰트 컬러 */
font-size:13px;
}
/* 체크박스 */
input[type="checkbox"] + label span {
display:inline-block;
width:17px;
height:17px;
margin:0 4px 0 0;
vertical-align:top;
background: url(../images/common/check_radio_sheet.png) left top no-repeat; /* 체크박스 */
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(../images/common/check_radio_sheet.png) -19px top no-repeat;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color:#212127; /* 폰트 컬러 */
font-size:13px;
display:inline-block;
min-width:70px;
}
input[type="radio"] + label span {
display:inline-block;
width:17px;
height:17px;
margin:0 4px 0 0;
vertical-align:middle;
background:url(../images/common/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(../images/common/check_radio_sheet.png) -57px top no-repeat;
}
.sele_in {margin-right:0 !important; height:17px; min-width:17px !important; margin:0 4px 0 0;}
'개발연습막쓰기 > 개발연습 막쓰기' 카테고리의 다른 글
로딩중 (0) | 2016.02.23 |
---|---|
셀렉트박스 select (0) | 2016.02.19 |
앤티티코드 (0) | 2016.02.13 |
제이쿼리 (0) | 2016.02.11 |
스프링 기본 개념 정리 사이트 (0) | 2016.02.02 |