欢迎光临
感受代码之美

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


layout: post
title: “漂亮的文件上传控件input file css样式整理”
date: 2019-02-11
categories: 技术

tags: [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

代码下载

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

转载请注明来源:四个空格 » 漂亮的文件上传控件input file css样式整理

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址