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

时间:2017-11-13
Web页面中，在需要上传文件时基本都会用到input type="file"元素，不管在哪种浏览器下面，它的默认样式都比较简单，和很多网页的风格都不太协调，本文章通过实例向大家介绍如何使用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;
}

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

随机文章
WEB前端知识点必读
最近更新