首頁 > web前端 > css教學 > 主體

如何修改Bootstrap中的檔案選擇器顯示?

Susan Sarandon
發布: 2024-10-31 09:27:30
原創
433 人瀏覽過

How to Modify the File Selector Display in Bootstrap?

Bootstrap 檔案輸入:修改檔案選擇器顯示

使用Bootstrap 4 的檔案瀏覽器時,您可能會遇到顯示預設「 Choose」的問題檔案...」文字。 >

在Bootstrap 5 中,自訂檔案輸入已被刪除。 🎜>要在Bootstrap 4.4 中顯示所選檔名,可以使用JavaScript:

Bootstrap 4.1

Bootstrap 4.1

Bootstrap 4. ,「選擇檔案...」佔位符在.custom-file-label 元素中設定:
<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>
登入後複製

可以使用CSS變更按鈕文字:

原始答案(Bootstrap 4 Alpha 6)
<code class="html"><label class="custom-file-label" for="exampleInputFile">
  Select file...
</label></code>
登入後複製

修改初始佔位符和按鈕文本,可以使用CSS:
<code class="css">.custom-file-input ~ .custom-file-label::after {
  content: "Button Text";
}</code>
登入後複製

要檢索所選文件名並更新顯示,可以使用JavaScript:

但是,由於佔位符文字是偽元素,JavaScript無法直接修改它。 control-file 範圍中:

<code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}</code>
登入後複製

以上是如何修改Bootstrap中的檔案選擇器顯示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!