html5 input file样式修改 css为input type=file设置自定义样式

input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

主要有两点需要做：

将input type=file控件透明

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

下面贴上代码：

html代码：

Click here to trigger the file uploader!

css代码：

.fileContainer {

overflow: hidden;

position: relative;

background: #ccc;

border-radius: .5em;

float: left;

padding: .5em;

}

.fileContainer [type=file] {

display: block;

font-size: 999px;

filter: alpha(opacity=0);

min-height: 100%;

min-width: 100%;

opacity: 0;

position: absolute;

right: 0;

text-align: right;

top: 0;

cursor: pointer;

}

如需查询运行效果，可点击这里