Рекомендуемый плагин для анимации пользовательского ввода файла - bs-custom-file-input; это то, что мы используем в нашей документации.
По умолчанию
Файловый ввод является наиболее сложным из всех и требует дополнительного JavaScript, если вы хотите связать их с функциональной функцией Выбрать файл… и выбранным текстом имени файла.
<div class="form-file">
<input type="file" class="form-file-input" id="customFile">
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>Добавьте disabled атрибут в, <input> и пользовательская разметка будет обновлена и станет отключенной.
<div class="form-file">
<input type="file" class="form-file-input" id="customFileDisabled" disabled>
<label class="form-file-label" for="customFileDisabled">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>Более длинный текст-заполнитель обрезается, а при недостатке места добавляется многоточие.
<div class="form-file">
<input type="file" class="form-file-input" id="customFileLong">
<label class="form-file-label" for="customFileLong">
<span class="form-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span>
<span class="form-file-button">Browse</span>
</label>
</div>Мы прячемся файл по умолчанию <input> через opacity и вместо этого стиля по <label> и объявить width и height на <input> для правильного расстояния для окружающего содержимого.
Размеры
Вы также можете выбирать между маленькими и большими входными файлами, чтобы соответствовать нашим текстовым входам аналогичного размера.
<div class="form-file form-file-lg mb-3">
<input type="file" class="form-file-input" id="customFileLg">
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file form-file-sm">
<input type="file" class="form-file-input" id="customFileSm">
<label class="form-file-label" for="customFileSm">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>