欢迎光临
我们一直在努力

漂亮的文件上传控件input file css样式整理

几乎所有的网站都少不了文件上传功能,因此整理几款漂亮的文件上传控件input file 表单控件很有必要,下面是我整理的文件上传input file表单控件样式,以作备用。

示例1(单文件上传)

1.HTML代码:

<div class="centerEle">
    <div class="form-group col-md-3  mb-2">
        <input type="text" name="viewfile" id="viewfile" placeholder="未选择文件" disabled autocomplete="off" class="form-control">
        <input type="file" style="display: none" onchange="reShow();" id="upload"/>

    </div>
    <label class="btn btn-primary  mb-2" for="upload">浏览</label>
</div>

2.样式预览

snapshot776800c7d7a10b2b.png

示例2(单文件上传)

1.HTML代码:

<div class="div">
    <div class="line">
        <span class="span">
            <input name="" type="text" id="viewfile" disabled="disabled" class="inputstyle"/>
            <input type="file" style="display: none;" onchange="document.getElementById('viewfile').value=this.value;" class="file" id="upload"/>
        </span>
        <label for="upload" class="file_pre">浏览...</label>
    </div>
</div>

2.样式预览

snapshot.png

示例3(多文件上传)

1.HTML代码:

<div class="centerEle">
    <div class="form-group col-md-3  mb-2">
        <input type="text" name="viewfile" id="viewfile" placeholder="未选择文件" disabled autocomplete="off" class="form-control">
        <input type="file" style="display: none" onchange="finishSelect();" multiple="multiple" id="upload"/>

    </div>
    <label class="btn btn-primary  mb-2" for="upload">浏览</label>
</div>

2.样式预览

snapshotde7493e3604ddf97.png

代码下载

本示例的代码下载地址:漂亮的文件上传控件样式整理

赞(1) 打赏
未经允许不得转载:Ddmit » 漂亮的文件上传控件input file css样式整理

评论 抢沙发

更好的WordPress主题

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册