1. 程式人生 > >檔案上傳input file預設樣式修改

檔案上傳input file預設樣式修改

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>檔案上傳按鈕修改樣式</title>
<style>
.file-box{
	display: inline-block;
	position: relative;
	padding: 3px 5px;				
	overflow: hidden;				
	color:#fff;				
	background-color: #ccc;
	}			
.file-btn{				
	position: absolute;				
	width: 100%;				
	height: 100%;				
	top: 0;    			
	left: 0;    			
	outline: none;    			
	background-color: transparent;    			
	filter:alpha(opacity=0);				
	-moz-opacity:0;				
	-khtml-opacity: 0;				
	opacity: 0;			
}
</style>	
</head>	
<body>		
	<div class="file-box">			
		<input type="file" class="file-btn"/>			
	上傳檔案		
</div>	
</body>
</html>