首页 > 其他分享 >bootstrap4修改文件上传样式

bootstrap4修改文件上传样式

时间:2023-02-07 09:58:48浏览次数:62  
标签:icons 样式 com https bootstrap4 上传

css

[hidden] {
    display: none !important;
}

 

html

<label class="btn btn-default">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera" viewBox="0 0 16 16">
        <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/>
        <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
    </svg>
    <input type="file" hidden>
</label>    

 

参考: https://codedefault.com/q/45550426777

图标资源: https://icons.bootcss.com/icons/camera/

效果:

 

标签:icons,样式,com,https,bootstrap4,上传
From: https://www.cnblogs.com/wangtianning1223/p/17097366.html

相关文章

  • WPF-06 样式(Style)
    在我们前面介绍资源的时候,我们提到了样式表,如果你之前是做Web开发的,你会发现Style有点类似于Web中的CSS。控件级别样式我们可以在控件级别定义自己的样式,控件级......
  • WPF-06 样式(Style)
    在我们前面介绍资源的时候,我们提到了样式表,如果你之前是做Web开发的,你会发现Style有点类似于Web中的CSS。控件级别样式我们可以在控件级别定义自己的样式,控件级......
  • SpringBoot-超大文件上传-如何上传文件-大文件上传
    ​ 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步......
  • SpringMVC-超大文件上传-如何上传文件-大文件上传
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。首先我们需要了解的是上传文件三要素:1.表单提交方式......
  • Js 实现导航li列表,选中时,显示选中样式
    结合Django项目实现实现步骤:html页面部分,使用bootstrap.css中的样式(不用可忽略,主要class样式),要引用bootstrap.css,使用到actvie样式;<linkhref="../../static/cs......
  • tp5使用layui实现多个图片上传(带附件选择)的方法实例
    tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果首页......
  • vue的上传图片
    <!--上传--><inputtype="file"ref="myfile1"@change="readImg1"id="fileImg1">data(){return{url:'',}}readImg1:......
  • ElementUI文件上传及服务器接口配置
    后台服务器的搭建入口文件//server.jsconstexpress=require('express')constapp=express()constPORT=4000//引入路由文件上传对应的路由constupload=requ......
  • 网页-超大文件上传-如何上传文件-大文件上传
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传......
  • Web-超大文件上传-如何上传文件-大文件上传
    ​ 一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用......