首页 > 其他分享 >file input in bootstrap css file 中修改背景颜色和风格

file input in bootstrap css file 中修改背景颜色和风格

时间:2023-08-05 19:56:44浏览次数:38  
标签:opacity right bootstrap file position input margin

use this may help you

<div class="form-group">
        <div class="fileUpload btn btn-primary">
        <span>File input</span>
        <input type="file" id="exampleInputFile" class="upload">
        </div>
        <p class="help-block">Example block-level help text here.</p>
</div>  

and in style

<style>
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
</style>

实例配置:
                <!-- Image -->
                <div class="form-group">
                   
                   
                    <div class="fileUpload btn btn-secondary">
                        <span>选择文件</span>
                        <label for="id_image"></label>
                        <input type="file" name="pdf" id="id_image"  accept="" required>


                    </div>
                   
                </div>
 
 

  input[type=file]::file-selector-button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

  效果:

 


标签:opacity,right,bootstrap,file,position,input,margin
From: https://www.cnblogs.com/weifeng1463/p/17608500.html

相关文章

  • 小白终于解决了在学习Go中不知道Makefile是什么的难题
    如何在Go中使用Makefile1.Makefile是什么 Makefile是一种构建工具,用于在项目中定义和执行一系列命令。它通常包含了一些规则和目标,用于编译、测试、运行和清理项目。2.Makefile可以用于哪些语言的构建过程Makefile最初是为了C程序的构建而设计的,但由于其简洁和灵活的特性,在......
  • BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中
    BootstrapBlazor组件库,Menu组件NavLinkMatch导致的多个菜单项被被同时选中BootstrapBlazor版本更新到7.9.0后,Menu组件出现首页同时被选中的情况默认首页/路径是选中状态,但是当选中其他路径后,首页路径还是选中状态。这是因为在BootstrapBlazor组件最新版中支持了一个新特性。可......
  • JAVA执行Linux命令报错Cannot run program error=2 , No such file or directory
    JAVA执行Linux命令报错Cannotrunprogramerror=2,Nosuchfileordirectory酒香不怕巷深IP属地:河北2019.04.2214:00:00字数411阅读6,648JAVA使用ProcessBuilder运行Linux命令报错:startfailed:Cannotrunprogram"xxx"(indirectory"xx"):error=2,......
  • phalcon总是跳到index/index问题 nginx try_files配置
    配置好测试系统后,无论怎么设置网站系统的路由(Router)系统,都不能引起分配器(dispatcher)的调用,总是调用默认的IndexController和indexAction。仔细检查了下代码,没问题。然后又拿出老办法–追踪源代码。找到对应的源代码分配器部分,看了看,也没啥可疑的错误。问题出在Nginx的配置......
  • 非root用户解决Rstudo安装R包时报错 libpng16.so.16: cannot open shared object file
    在安装好几个R包的时候都出现了这个报错,看网上的解决方法都是root用户才能干的,我只是普通用户没法办,本来想忍忍就过去了,可是今天装个Deseq2都装不起来,并报错:libpng-config:commandnotfoundread.c:3:17:fatalerror:png.h:Nosuchfileordirectory所以我下定决心一定要......
  • 基于antd-input & tsx封装一个按固定位数、固定符号分隔内容的输入框
    /** *可在每四位字符间插入一个空格的输入框 */import{Input}from'antd';import{useEffect}from'react';constInputGap=(props:any)=>{ const{useGap,value,onChange}=props; //非onChange事件变更value useEffect(()=>{  value......
  • linux设置登录失败处理功能(密码错误次数限制、pam_tally2.so模块)和操作超时退出功能(/e
    原文链接:https://blog.csdn.net/hjxloveqsx/article/details/129004832一、登录失败处理功能策略1、登录失败处理功能策略(服务器终端)(1)编辑系统/etc/pam.d/system-auth文件,在auth字段所在的那一部分添加如下pam_tally2.so模块的策略参数:authrequiredpam_tally2.soonerr=fa......
  • dockerfile
      FROMxx.xx.xx.xx:5000/library/submit:v2COPY/usr/local/java/usr/local/javaCOPY/data/request.json/dataCOPY/data/test.pgm/dataCOPY/data/test.yaml/dataCOPY/home/bim/luo/eclipse/output2/Robot_Project3_4.jar/xxxCMD["/bin/sh",&......
  • Bootstrap4实现简单缺陷列表页面
    缺陷列表实现代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>缺陷列表</title><!--CSS--><linkhref="https://cdn.bootcdn.net/ajax/libs/twitter-bootstra......
  • Python 优化第一步: 性能分析实践 使用cporfile+gprof2dot可视化
    拿来主义:python-mcProfile-oprofile.pstatsto_profile.pygprof2dot-fpstatsprofile.pstats|dot-Tpng-oclick.png然后顺着浅色线条优化就OK了。 windows下:google下graphviz-2.38.msi,然后安装。dot命令需要。gitclone https://github.com/jrfonseca/gprof2dot.git......