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

标签: cssfile样式   时间: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;
}

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

 

 

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