【问题标题】：How to change "Choose file" text using Bootstrap 5如何使用 Bootstrap 5 更改“选择文件”文本
【发布时间】：2021-04-22 12:53:59
【问题描述】：

在 Bootstrap 5 中使用像 Bootstrap 4 这样的 CSS 改变选择输入文件的文件文本是不可能的吗？

如何为“未选择文件”添加边距？

【问题讨论】：

Bootstrap 4的同样问题

标签： html css file-upload bootstrap-5

【解决方案1】：

Bootstrap 5 beta 不再提供使用伪元素覆盖 browser's file input defaults 的 custom file input like Bootstrap 4。因此，您必须使用 JS 或制作自己的伪元素来隐藏输入的 Choose file.. 区域...

#formFile::before {
  content: "Pick file";
  position: absolute;
  z-index: 2;
  display: block;
  background-color: #eee;
  width: 80px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container min-vh-100 py-2">
  <div class="row">
    <div class="col">
      <div class="mb-3">
        <input class="form-control" type="file" id="formFile">
      </div>
    </div>
  </div>
</div>

【讨论】：

这在 Chrome 上可以正常工作，但在 Firefox 上不行！
按钮掩码后面显示了一些文本。它可能应该有一个灵活的宽度。此外，它在单击时显示错误的颜色。
很奇怪，可能是因为我原来的答案是 BS 5 beta

【解决方案2】：

我创建了一个带有标签的输入组，即输入，然后附加了另一个标签。这样，您可以根据需要设置样式并将自定义文本作为输入组文本。然后隐藏输入元素（display:none 或 width:0 或其他）

例子：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<p>Label before</p>

<div class='input-group'>
  <label class='input-group-prepend'>
    <div class='input-group-text form-control' for='file-input-thing'>Pick File</div>
  </div>
  <input type='file' id='file-input-thing' style='width:0;'>
  <label id='file-input-label' class='form-control' for='file-input-thing'/>
</div>

<p>Label after</p>

<div class='input-group'>
  <label id='file-input-label' class='form-control' for='file-input-thing'/>
  <input type='file' id='file-input-thing' style='width:0;'>
  <div class='input-group-append'>
    <label class='input-group-text form-control' for='file-input-thing'>
  </div>
</div>

然后，您可以根据需要为标签指定样式。通过将两个标签都绑定到输入元素中，您可以单击其中一个并选择一个文件。此外，您可以将 ID 添加到空白标签并将值更新为文件名。

let inputElement = document.getElementById('file-input-thing');
let inputLabel= document.getElementById('file-input-label');

inputElement.addEventListener('change', function(e) {
  let file = e.target.files[0];
  inputLabel.innerHTML = file.name;
})

我是新手，所以可能有更好的解决方案，但这对我有用。

【讨论】：

我将您的标记转换为 sn-p。看起来它需要一些润色。有额外的结束 div 标签，你不会想要两个标签作为输入。

【解决方案3】：

这就是我实现它的方式，只需将其复制粘贴到您的代码中，您就会看到结果

<Button onClick={() => document.getElementById('imageFileSelect').click()}>Choose Image</Button>
<input className="form-control d-none"  id='imageFileSelect' type="file" onChange={imageSelected}></input>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

Bootstrap 5 + 一些 CSS

使用自定义标签编写 Bootstrap 的 custom file input。
使用::file-selector-button 伪元素隐藏默认Choose file 按钮。旧版本的 Chrome/Opera/Safari 和 Edge/IE 分别有伪元素 ::-webkit-file-upload-button 和 ::-ms-browse。但bootstrap.css 仅使用::file-selector-button 和::-webkit-file-upload-button。所以我建议也这样做。
为 :hover 效果以及标签和输入字段之间的细边框添加更多 CSS。

在 Chrome、Firefox 和 Edge 中测试。

https://codepen.io/glebkema/pen/VwMQWGE

.custom-file-button input[type=file] {
  margin-left: -2px !important;
}

.custom-file-button input[type=file]::-webkit-file-upload-button {
  display: none;
}

.custom-file-button input[type=file]::file-selector-button {
  display: none;
}

.custom-file-button:hover label {
  background-color: #dde0e3;
  cursor: pointer;
}

<div class="container py-3">

  <div class="input-group custom-file-button">
    <label class="input-group-text" for="inputGroupFile">Your Custom Text</label>
    <input type="file" class="form-control" id="inputGroupFile">
  </div>

</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

【讨论】：