input[type='file'] 커스텀

log 2015. 4. 28. 16:46

html

<input id="fileName" class="typeTxt" readonly="readonly"/>
<div class="file_wrap">    
	<input type="button" value="Search files" class="typeButton"/>    
	<input type="file" class="typeHidden" title="" onchange="javascript:document.getElementById('fileName').value=this.value"/></div>

css

.typeTxt {
	float:left;
} 
.file_wrap {
  position:relative;
  width:100px;
  height:23px;
  overflow:hidden;
}
.typeButton {
  width:100px;
  position:absolute;
  top:0;
  right:0;
  background-color:#ff4081;
  color:#ffffff;
  border-style:solid;
}
.typeHidden {
  font-size:23px;
  position:absolute;
  right:0;
  top:0;
  opacity:0;filter:alpha:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0;
}