[HTML] input Type="file"~ customizing '찾아보기' button

CSS

1 2 3 4

.imgFileBox input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} .imgFileBox label {display: inline-block; padding: .5em .75em; font-size: inherit; color: #FFFFFF; line-height: normal; vertical-align: middle; background-color: #d7a6d4; cursor: pointer; border: 1px solid #a37da1; border-bottom-color: #e2e2e2;} .imgFileBox label:hover {background: #c98ac5 !important;} .imgFileBox .uploadImgFile {width: 251px !important; height: 13px !important; display: inline-block; padding: .5em .75em; font-size: inherit; font-family: inherit; line-height: normal; vertical-align: middle; background-color: #f5f5f5; border: 1px solid #ebebeb; border-bottom-color: #e2e2e2; border-radius: .25em; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

cs

HTML

1 2 3 4 5 6

<div class="imgFileBox">   <input class="news_name news_name17 uploadImgFile" id="uploadImgFile" value="파일 선택" disabled="disabled"/>   <label for="imgFile">찾아보기</label>   <form:input type="file" class="uploadHidden" path="imgFile"/>   <!-- <input type="file" class="uploadHidden" id="imgFile"/> --> </div> Colored by Color Scripter

cs

- when we use input tag with file type, we can see just so ugly button and cannot take it to other side like first tag. In this case, can custom it with using CSS like second tag.

찾아보기