自定义input type=file 样式美化input type=file 改变input type=file控件“丑陋面貌”

当我们想要用css美化表单的时候，有两个控件就会和前段人员作对，一个是是大名鼎鼎的select，另一个就是我现在要说说的input type=file

原始的input type=file太丑了，丑的惨不忍睹，当一个非常漂亮的页面，就因为input type=file这个控件破坏整体美感的时候，你会有“一颗老鼠屎坏了一锅汤”的感慨。我们要美化input type=file控件。

原理：看起来input type=file 是一个text和一个button组合，那我们就用一个text和一个button来代替input type=file控件，美化text和button对我们来说so easy！然后我们把input type=file控件变成透明的，并且将input type=file控件放置text和button组合上。

技术点：

1、将input type=file控件透明

2、将input type=file控件放置text和button组合上，必须保持input type=file控件与text和button组合大小一致，位置完全重合。

原始的file控件是这样的：

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

既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样：

<div class="daoru">导入文件路径：
   <input type="text"   class="input_text" id="textfield"  > 
   <input type="button" class="input_sub"  value="浏览..." > 
   <input type="submit" class="input_sub"  value=" 上 传 " >
   <input type="file"   class="input_file" contenteditable="false"  οnchange="document.getElementById('textfield').value=this.value">
</div>

外面的一层div是为了给里面的input提供位置参考，因为写样式的时候需要相对定位，使真正的file控件覆盖在模拟的上面，然后隐藏掉file控件（使file控件不可见），所以css代码是这样的：

.daoru {font-size: 13px;}
.daoru .input_text {width: 140px;height: 12px;line-height: 12px;padding: 5px;border: 1px solid #C0C5CB;font-size: 12px;color: #333;}
.daoru .input_sub {width: 60px;height: 24px;line-height: 24px;text-align: center;font-size: 13px;color: #fff;border: none;background: #DA3610;}
.daoru .input_file {position: absolute;top: 0;left: 99px;height: 24px;_height: 30px;filter: alpha(opacity : 0);opacity: 0;width: 218px}

效果图：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>自定义上传文件样式</title>
<style type="text/css">
.daoru {font-size: 13px;}
.daoru .input_text {width: 140px;height: 12px;line-height: 12px;padding: 5px;border: 1px solid #C0C5CB;font-size: 12px;color: #333;}
.daoru .input_sub {width: 60px;height: 24px;line-height: 24px;text-align: center;font-size: 13px;color: #fff;border: none;background: #DA3610;}
.daoru .input_file {position: absolute;top: 0;left: 99px;height: 24px;_height: 30px;filter: alpha(opacity : 0);opacity: 0;width: 218px}
</style>
</head>
<body>
	<div class="daoru">导入文件路径：
	    <input type="text"   class="input_text" id="textfield"  > 
	    <input type="button" class="input_sub"  value="浏览..." > 
	    <input type="submit" class="input_sub"  value=" 上 传 " >
	    <input type="file"   class="input_file" contenteditable="false"  οnchange="document.getElementById('textfield').value=this.value">
	</div>
	<input type="file" >
</body>
</html>

原文链接：https://blog.csdn.net/u010243555/article/details/42120725