css input[type=file]美化样式

先上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    .s-img {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .wrap {
        /*去除点击时的透明背景*/
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        position: relative;
        width: 97px;
        height: 37px;
        text-align: center;
        font-size: 15px;
        border-radius: 12px;
        line-height: 37px;
        color: rgb(66, 66, 66);
        border: 1px solid rgb(220, 220, 220);
    }

    #portrait {
        max-width: 150px;
    }
    </style>
</head>

<body>
    <div class="wrap">上传图片
        <input type="file" name="" class="s-img" onchange="showPreview(this)">
    </div>
    <img id="portrait"></img>
    <!-- <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> -->
    <script>
    function showPreview(source) {
        var file = source.files[0];
        // console.log(file)
        //     if(!/image\/\w+/.test(file.type)){  
        //     alert("不是图片文件");  
        //     return false;  
        // } 

        if (window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                console.log(e)
                document.getElementById("portrait").src = e.target.result;
            };
            fr.readAsDataURL(file);
        }
    }
    </script>
</body>

</html>

input[type=file]

未修改之前的样式

美化后的图片


实现的思路是,外层div包裹inout,再把input opacity设为0,让它变透明,并且宽高设为和父div一样,absolute 调整位置,这样点击父div的时候 就点击到了input[file],在自定义外层css样式,就实现了美化的效果, 最好在外层div css中加个属性 

-webkit-tap-highlight-color:rgba(0,0,0,0);

这样点击的时候 在手机端上就不会出现透明背景了。


还有一种更简单的方法

label直接包裹input[type=file] input 直接隐藏 修改label样式就可以了

参考地址:

-webkit-tap-highlight-color

图片上传生成略缩图

input file 样式美化  


回到顶部