如何使用 Bootstrap 5 更改 "Choose file" 文本

Question

是否无法像 Bootstrap 4 那样使用 CSS 更改 Bootstrap 5 中输入文件的选择文件文本？

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

Answer 1

Bootstrap 5 beta 不再提供 that used pseudo elements to override the browser's file input defaults。因此，您必须使用 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>

Answer 2

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

示例：

<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;
})

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

Answer 3

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

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

Answer 4

Bootstrap 5 + 一些 CSS

使用自定义标签撰写 Bootstrap 的 custom file input。
使用 ::file-selector-button pseudo-element. There are pseudo-elements ::-webkit-file-upload-button and ::-ms-browse for older versions of Chrome/Opera/Safari and Edge/IE respectively. But bootstrap.css 隐藏默认 Choose file 按钮仅使用 ::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">

Answer 5

如果文件输入被放置在标签元素内然后隐藏标签本身将在被点击时充当文件输入。将 form-control class 和 tabindex 属性（指定元素可以聚焦）添加到标签中，然后将其设置为通用 Bootstrap 输入。

<div class="input-group">
  <span class="input-group-text">Custom Add-on Text</span>
  <label class="form-control" tabindex="0">Custom Input Text
    <input type="file" class="invisible">
  </label>
</div>

https://codepen.io/yetiface/pen/PoQqrda

此解决方案有其缺点，例如标签元素不会自动接收 bootstrap 专门用于 input[type='file'] 的样式。然而，这是一个如此简单的方法，我觉得值得发布给那些能帮助到它的人。

如何使用 Bootstrap 5 更改 "Choose file" 文本

How to change "Choose file" text using Bootstrap 5

html

css

file-upload

bootstrap-5

Bootstrap 5 + 一些 CSS