django 美化上传文件按钮

Django中原始的上传文件按钮太丑,于是美化一下。

 

代码:CSS

	.upload-btn-wrapper {
		  position: relative;
		  display: inline-block;
		}

	.btn {
	  border: 2px solid #454cad;
	  color: #454cad;
	  background-color: white;
	  padding: 8px 20px;
	  border-radius: 8px;
	  font-size: 20px;
	  font-weight: bold;
	}

	.upload-btn-wrapper input[type=file] {
	  font-size: 30px;
	  position: absolute;
	  left: 0;
	  top: 0;
	  opacity: 0;
	  width:600px;
	}

　　代码HTML

					<form action="" method="post" enctype="multipart/form-data">
						<div class="upload-btn-wrapper">
							<button class="btn">Choose a zip file</button>
							<input id='upload-rar' type="file" name="myfile" accept="application/zip">
						</div>
						<br/>
						<br/>
						<button type="submit" class="btn btn-primary">提交 & 计算:{{myFile_name}}</button>
					</form>

　　显示效果: