selectbox/input

스크립트를 이용하지 않고 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