利用css对input[type=file] 样式进行美化，input上传按钮美化

2019独角兽企业重金招聘Python工程师标准>>>hot3.png

<input type="file" name="fileUpload"/>

的效果是这样的：

利用css可以变成如下效果：

demo:

<!DOCTYPE html>
<html>
  <head>
    <title>demoInput.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html">
	<meta charset="utf-8">
    
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/>
    <style>
    	#fileUpLoadBox{ 
		position: relative; 
		width: 1050px; 
		height: 100px; 
		background-color: #9ebde0;; 
		background-position: 0 0; 
		background-attachment: scroll; 
		line-height: 37px; 
		text-align: center; 
		color: white; 
		cursor: pointer; 
		overflow: hidden; 
		z-index: 1; 
	} 
	#fileUpLoadBox input { 
		position: absolute; 
		width: 1050px; 
		height: 100px; 
		line-height: 40px; 
		font-size: 23px; 
		opacity: 0; 
		filter: "alpha(opacity=0)"; 
		filter: alpha(opacity=0); 
		-moz-opacity: 0; 
		left: -5px; 
		top: -2px; 
		cursor: pointer; 
		z-index: 2; 
	} 

    </style>
  </head>
  <body>
  	<br>
    <div>
	 <form role="form" id="fileUploadForm" enctype="multipart/form-data" class="col-md-offset-1">
	   <div class="form-group"id="fileUpLoadBox">
	        <input type="file" name="uploadFile" id="InputFileEditor" class="field"/>
	        <h3>点击选择文件</h3>
	        <h1><i class="fa fa-fw fa-cloud-upload"></i></h1>
	   </div>
	</form>
	<div class="box-footer">
	      <div id="showFileName" class="col-md-offset-4"></div>
	      <button type="submit" class="btn btn-primary col-md-offset-4 col-md-3" id="imsiFileUploadSubmit">上传</button>
	</div>
    </div>
  </body>
</html>

转载于:https://my.oschina.net/AnymoreCoder/blog/759504