如何使用Bootstrap 5

Question

是不可能的，选择Bootstrap 5中使用Bootstrap等CSS中的输入文件的文件文本？

如何将保证金添加到“不选择的文件”？

Answer 1

Bootstrap5 +一些CSS

compose bootstrap的
1. custom文件输入带有自定义标签。 hide默认的Choose file
按钮带有pseudo-element。对于较旧版本的Chrome/Opera/Safari和Edge/IE，有伪元素
2. ::file-selector-button

   和

   ::-webkit-file-upload-button。但是

   bootstrap.css

   仅使用::-ms-browse

   和

   ::file-selector-button

   。所以我建议这样做。
   

   为::-webkit-file-upload-button效应和标签和输入字段之间的薄边界添加了更多的CS。 在铬，Firefox和Edge中进行测试。 https：//codepen.io/glebkema/pen/vwmqwge

:hover

.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">

类和tabindex属性（指定元素可以焦点）添加到标签中，然后将其像通用的引导输入一样样式。

form-control

https：//codepen.io/yetiface/pen/poqqrda

Answer 2

该解决方案具有其缺点，例如，标签元素不会自动接收专门针对

<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>

的引导样式。但是，这是一种非常简单的方法，我认为值得为那些可以帮助的人发帖。
    

我需要更改两个文本，因此此方法帮助

input[type='file']

$('#review-image').change(function(e) {
    let fileName = (e.target.files.length > 0) ? e.target.files[0].name : 'choose_file_not';
    $('#review-image-label').text(fileName);
});

Answer 3

Bootstrap5 beta不再提供

custom文件输入，例如Bootstrap4

，该文件使用伪元素来覆盖

Browser'sFile inputDefaults

。因此，您必须使用JS或制作自己的psuedo元素来隐藏输入的区域...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


<div class="container mt-3">
  <div class="input-group custom-file-button">
    <label class="input-group-text" for="review-image" role="button">choose_file</label>
    <label for="review-image" class="form-control" id="review-image-label" role="button">choose_file_not</label>
    <input type="file" class="d-none" id="review-image" name="images[]" multiple accept="image/*">
  </div>
</div>

Answer 4

Choose file

I创建了一个带有标签，输入的输入组，然后附加了另一个标签。这样，您可以根据需要进行样式设计，并将自定义文本作为输入组文本。然后，您隐藏输入元素（显示：无或宽度：0或某物）

示例：

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

Answer 5

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

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

这就是我实施的方式， 只需将其复制到您的代码，您就会看到结果

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

我需要将文件输入字段更改为Dark Moode并添加：Data-BS-theme =“ dark”

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

there是我使用最新的bootstrap ...

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

Answer 6

<div class="mb-3" data-bs-theme="gray">
        <label for="formFile" class="form-label">Default file input example</label>
        <input class="form-control" type="file" id="formFile"></div>

if (document.querySelectorAll('input[type="file"].visually-hidden')) {
    document.querySelectorAll('input[type="file"].visually-hidden').forEach((element) => {
        element.parentElement.title = element.nextElementSibling.innerText;
        
        element.addEventListener('change', (event) => {
            event.target.parentElement.title = event.target.nextElementSibling.innerText = event.target.files[0].name;
        })
    })
}

Answer 7

微米主义方法，易于适应