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

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

主要有两点需要做：

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

 下面贴上代码：

html代码：

<label class="fileContainer">
    Click here to trigger the file uploader!
    <input type="file"/>
</label>

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;
}

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

上一页 下一页

原文地址：http://www.manongjc.com/article/2223.html