input type="file" 이미지 화, input type="checkbox" 이미지 화

1. input type="file" 이미지 화

label { display: inline-block; cursor: pointer;}
input { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0);}

<label for="file"><img src="image.png" alt="파일찾기"></label>
<input type="file" id="file">

 

2. input type="checkbox" 이미지 화

.checkbox { display:none; }
.checkbox +label { display: inline-block; height:19px; padding-left: 26px; line-height: 22px; background: url(ico_checkbox.png) no-repeat; cursor: pointer;}
.checkbox:checked +label { background-position: 0 -21px;}

<input type="checkbox" id="box1" class="checkbox"><label for="box1">클릭하면 체크박스 이미지가 나타납니다.</label>