input[type="file"]的样式修改

input[type=”file”]的样式修改

上传文件会用到<input type="file">的方法，要对其样式进行控制，针对input框是比较麻烦的，所以我在看了一篇博客之后选择在外面包裹了一层a元素进行样式控制：

• 首先在input框外面加一层a标签

<a href="javascript:;" class="a-upload">
<input type="file" name="file"/>点击这里上传电路图
</a>

• 然后就可以对a和input标签进行样式控制了

.a-upload { padding: 4px 10px; position: relative; height: 40px; line-height: 30px; cursor: pointer; color: #000;text-shadow: 1px 1px 3px #999; background:#ddd; border: 1px solid #ddd;border-radius: 4px; display: inline-block; }
.a-upload  input { position: absolute; right: 0; top: 0; opacity: 0; filter: alpha(opacity=0); cursor: pointer }
.a-upload:hover { color: #444; background:#999; border-color: #ccc; text-decoration: none }

• 颜色可以随意进行控制

• 这里的href=”javascript:;”，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。

• 当然也可以借助bootstrap加一点小图标哦

<a href="javascript:;" class="a-upload">
<input type="file" name="file" class="_file">
<span class="glyphicon glyphicon-picture"></span>
上传
</a>

---

效果图如下：