当我想使用bootstrap中的样式快速渲染我的页面的时候发现，我渲染了button按钮的样式，但没找到input对应的样式，样式不统一
单单渲染一个input组件文件上传按钮样式在bootstrap官方文档中竟然没有，然后我继续搜寻有没有相关的内容，接着我看到了另一个方案，下载插件bootstrap-FlieInput组件来渲染input组件
方案一
Bootstrap File Input，最好用的文件上传组件_bootstrap-fileinput_沉默王二的博客-CSDN博客
但这个方案对我来说有点麻烦，我只是想要选择文件这个样式统一成上传文件一样的按钮样式，于是简单的方法来了
方案二
首先在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教程_码农研究僧的博客-CSDN博客
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，这是必须的。
设置完，效果如下：
大功告成！
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
