作为一名前端程序猿呢，在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是，唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。刚好菜鸟我最近工作中也遇到了这个问题。解决以后想着人生在于总结。于是乎就把这个简单的demo记录下来。
html代码
css代码
.a-upload {
padding: 4px 10px;
width: 200px;
height: 30px;
box-sizing: border-box;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
top: 5px;
}
.a-upload input {
position: absolute;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
width: 200px;
height: 30px;
left: 0;
top: 0;
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}结果
【相关推荐】
启山智软物流配送系统
下载
启山智软物流配送是基于Spring Cloud 和 Vue.js的JAVA物流配送系统。包含总控制后台 、城市合伙人(商家pc端)、 区域团长后台 、用户端小程序 、手机H5等多个操作模块。为响应用户需求我们新增了后台自定义装修组件模块，使页面更加美观，操作更加灵活简便。淘宝商品CSV一键导入，提升用户使用感。还有与众不同的管理台侧边栏设计，打破传统管理台样式。 另有公众号接龙、引导页上传、区域团
1. 免费html在线视频教程
2. html开发手册
