CSS自定义上传文件按钮样式（兼容I6+）

CSS自定义上传文件按钮样式：http://www.alleyloft.com/contents/share?id=14
input type = “file”文件选择表单元素二三事：http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/
 
<!doctype html>!
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义上传文件按钮</title>
    <style>
        *{margin: 0;padding: 0;}

        .box{
            position: relative;
            float: left;
            overflow: hidden;
        }
        input.uploadFile{
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
            width: 276px;
            height: 36px;
            overflow: hidden;
        }
        a.link{
            float: left;
            display: inline-block;
            padding: 4px 16px;
            color: #fff;
            font: 14px "Microsoft YaHei", Verdana, Geneva, sans-serif;
            cursor: pointer;
            line-height: 28px;
            text-decoration: none;
        }


        .filePicker{
            margin: 200px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            background: #00b7ee;
        }

        .filePicker label{
            display: block;
            width: 100%;
            height: 100%;
        }

        .filePicker input[type="file"]{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="javascript:;"  class="link">浏览</a>
        <input type="file" class="uploadFile" accept="image/*">
    </div>

    <div class="filePicker">
        <input id="img_input" type="file" accept="image/*">
        <label for="img_input">上传图片</label>
    </div>
</body>
</html>

 

posted @ 2015-04-12 17:57  前端丶守望者  阅读(365)  评论(0)  编辑  收藏  举报