如何重构Bootstrap表单上传组件，实现按钮与文本分离且样式一致？

我需要重构Bootstrap表单上传字段，原因是Bootstrap的文件上传字段是一个整体组件，无法拆分上传按钮与上传文本。

截图中第一个是Bootstrap原生上传字段，第二个是我目前实现的上传按钮。

当前实现的代码如下：
原生上传字段HTML：

<div class="mb-3 right-box">
  <label for="formFile">Binary Package</label>
  <input class="form-control formname" (change)="onFileSelected($event);" type="file" id="formFile">
</div>

自定义上传按钮HTML：

<label for="formFile">Source Package</label><br>
<button id="formFile" (click)="binaryPackageInput.click()">
  Durchsuchen...
</button>
<input #binaryPackageInput class="form-control formname binary-package"
  (change)="onFileSelected($event); checkForm()" type="file" formControlName="fileControl">
<span>{{this.fileName}}</span>

当前CSS：

input.binary-package {
  display: none;
}

我已使用相同的Bootstrap类，但样式未与原生上传字段一致，请问如何在分离按钮与文本的同时，保持与第一个上传按钮相同的样式？

实现方案 #

利用Bootstrap的input-group组件模拟原生上传字段的结构，既能拆分按钮与文本显示区域，又能复用Bootstrap原生样式。

调整后的HTML代码

<div class="mb-3 right-box">
  <label for="sourcePackage">Source Package</label>
  <div class="input-group">
    <!-- 自定义上传按钮，匹配Bootstrap原生按钮样式 -->
    <button class="btn btn-outline-secondary" type="button" (click)="binaryPackageInput.click()">
      Durchsuchen...
    </button>
    <!-- 文件名显示区域，用只读form-control对齐原生样式 -->
    <input type="text" class="form-control" readonly value="{{this.fileName}}">
    <!-- 隐藏的文件输入框 -->
    <input #binaryPackageInput class="binary-package"
           (change)="onFileSelected($event); checkForm()" 
           type="file" formControlName="fileControl">
  </div>
</div>

保留的CSS代码

input.binary-package {
  display: none;
}

关键说明

• input-group布局：Bootstrap原生组件会自动处理内部元素的边框合并、高度对齐，完美匹配原生上传字段的整体外观。
• 按钮样式：btn btn-outline-secondary是Bootstrap文件上传按钮的默认样式，确保按钮颜色、边框、hover效果与原生一致。
• 文件名显示：用只读form-control替代<span>，保证文本区域的内边距、字体、边框样式和原生上传字段完全对齐。
• 修正ID冲突：移除重复的id="formFile"，避免HTML元素ID唯一性问题。

内容的提问来源于stack exchange，提问作者Mark Baumann