建立美化的上傳文件按鈕

時間 2019-12-14

標籤建立美化上傳文件按鈕简体版

原文原文鏈接

<input type="file">標籤自帶的上傳按鈕是沒法改變樣式，若是不須要顯示上傳按鈕的路徑，能夠作以下處理：html

一、設置input的font-size大小爲想要的大小；this

二、設置input的透明度爲0；url

三、爲其父元素定義樣式；spa

四、htm

DEMO：blog

<!DOCTYPE html>
<html>
<head>
    <style>
        .fileInputContainer{
            height:256px;
            background:url(http://images.cnblogs.com/cnblogs_com/dreamback/437546/o_ff6.png);
            position:relative;
            width: 256px;
        }
        .fileInput{
            height:256px;
            overflow: hidden;
            font-size: 300px;
            position:absolute;
            right:0;
            top:0;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor:pointer;
        }
    </style>

</head>
<body>
    <div class="fileInputContainer">
        <input class="fileInput" type="file" name="" id="" />
    </div>
</body>
</html>圖片

另一種方法是：ip

一、單獨樣式和上傳文件的input（將input隱藏到頁面以外，或者將其opacity設置爲0）ci

二、單獨定義一個容器存放上傳的文件的路徑get

DEMO：

<!DOCTYPE html><html><head> <style> .fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;} .upfile{position:absolute;top:-100px;} .upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;} </style> </head><body> <div class="fileInput left"> <input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/> <input class="upFileBtn" type="button" value="上傳圖片" onclick="document.getElementById('upfile').click()" /> </div> <span class="tip left" id="upfileResult">圖片大小不超過2M,大小90*90,支持jpg、png、bmp等格式。</span></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。