繞過 Bootstrap 4 檔案輸入的限制
Bootstrap 4 提供了自訂檔案輸入元件來簡化使用者的檔案選擇。但是，如果您希望自訂「選擇檔案...」佔位符文字或顯示所選檔案的名稱，您可能會遇到一些挑戰。
更改 Bootstrap 4.1 及更高版本中的佔位符
自 Bootstrap 4.1 起，佔位符文字駐留在 custom-file-label 元素中。您可以使用 CSS 覆寫它：
<code class="css">.custom-file-label::after {
content: "Select file...";
}</code>調整檔案按鈕文字
Bootstrap 4.1 不提供更改檔案按鈕文字的簡單方法。要實現此目的，請考慮添加一些自訂樣式：
<code class="css">.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}</code>在Bootstrap 4.4 中顯示所選檔案名稱
Bootstrap 4.4 允許您使用純文字顯示所選檔案的名稱JavaScript:
<code class="javascript">document.querySelector('.custom-file-input').addEventListener('change', function(e) {
var fileName = document.getElementById("myInput").files[0].name;
var nextSibling = e.target.nextElementSibling
nextSibling.innerText = fileName
})</code>預先引導4.1 選項：
隱藏初始佔位符：
<code class="css">.custom-file-control.selected:lang(en)::after {
content: "" !important;
}</code>顯示選定的檔案名稱：
<code class="javascript">$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
$(this).next('.form-control-file').addClass("selected").html(fileName);
})</code>這些方法為自訂Bootstrap 4 的檔案輸入元件提供了彈性，使您能夠根據您的特定要求進行定制。
以上是如何自訂Bootstrap 4的檔案輸入元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
