[css]自定义input文件上传按钮样式

1941s

已于 2023-03-04 13:00:01 修改

阅读量1.8k

点赞数

分类专栏：前端文章标签：前端 html5 css3 bootstrap css

于 2023-03-04 12:50:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53236070/article/details/129316513

版权

前端专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何在Bootstrap中遇到input文件上传按钮样式不统一的问题时，通过CSS调整和使用button包裹input实现样式一致的方法。首先引入Bootstrap样式，然后修改input和button的CSS，最后通过absolute定位使input覆盖在button上，达到视觉上的统一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我想使用bootstrap中的样式快速渲染我的页面的时候发现，我渲染了button按钮的样式，但没找到input对应的样式，样式不统一

单单渲染一个input组件文件上传按钮样式在bootstrap官方文档中竟然没有，然后我继续搜寻有没有相关的内容，接着我看到了另一个方案，下载插件bootstrap-FlieInput组件来渲染input组件

方案一

Bootstrap File Input，最好用的文件上传组件_bootstrap-fileinput_沉默王二的博客-优快云博客

但这个方案对我来说有点麻烦，我只是想要选择文件这个样式统一成上传文件一样的按钮样式，于是简单的方法来了

方案二

首先在head引入bootstrap

<head>
     <link rel="stylesheet" href="./css/bootstrap.css"/>
</head>

然后是我们的html样式

<body>
    <div class="box">
        <input class="input-btn" type="file"/>
        <button>id="btnUpload">上传文件</button>
    </div>
</body>

现在是最基本的样式，效果如下：

然后是使用bootstrap文档中的组件给予button按钮样式

bootstrap教程：Bootstrap从入门到精通（全）_bootstrap教程_码农研究僧的博客-优快云博客

bootstrap文档组件网址：组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

<body>
    <div class="box">      
        <input class="input-btn" type="file"/>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="btnUpload">上传文件</button>
    </div>
</body>

效果如下：

接下来我们使用button标签去包裹input上传文件，包裹input的button标签我们使用一样的bootstrap按钮组件样式，为的是样式统一

<body>
    <div class="box">             
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="btnUpload">
            选择文件<input class="input-btn" type="file"/>
        </button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="btnUpload">上传文件</button>
    </div>
</body>

效果如下：

接下来我们要使input标签所能触发的范围就是选择文件button标签的范围

设置css时间：

将input标签的position设置为absolute，这样设置top，left等位置时才是相对于父元素button的，而不是相对于窗口。设置width: 100% height: 100%，让input的宽度和长度相等于父元素button。设置opacity是为了让input的默认样式隐藏起来，更换了样式的同时依旧能触发。

input{
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

将input标签所在的父元素button标签的设置

button{
    position: relative;
}

用absolute定位时，要把其上一级的元素样式属性position设置为relative，这是必须的。

设置完，效果如下：

大功告成！