Bagaimana untuk Menyesuaikan Komponen Input Fail Bootstrap 4?

Mengatasi pengehadan Input Fail Bootstrap 4

Bootstrap 4 menyediakan komponen input fail tersuai untuk memudahkan pemilihan fail untuk pengguna. Walau bagaimanapun, jika anda ingin menyesuaikan teks pemegang tempat "Pilih fail..." atau memaparkan nama fail yang dipilih, anda mungkin menghadapi beberapa cabaran.

Menukar Pemegang Tempat dalam Bootstrap 4.1 dan ke atas

Sejak Bootstrap 4.1, teks pemegang tempat berada dalam elemen label fail tersuai. Anda boleh mengatasinya dengan CSS:

<code class="css">.custom-file-label::after {
  content: "Select file...";
}</code>

Tweaking File Button Text

Bootstrap 4.1 tidak menawarkan kaedah mudah untuk mengubah teks butang fail. Untuk mencapai matlamat ini, pertimbangkan untuk menambah beberapa penggayaan tersuai:

<code class="css">.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}</code>

Memaparkan Nama Fail Terpilih dalam Bootstrap 4.4

Bootstrap 4.4 membolehkan anda memaparkan nama fail yang dipilih menggunakan biasa 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>

Pra-Bootstrap 4.1 Pilihan:

Menyembunyikan Pemegang Tempat Awal:

<code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}</code>

Memaparkan Nama Fail Terpilih:

<code class="javascript">$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})</code>

Pendekatan ini memberikan fleksibiliti dalam menyesuaikan komponen input fail Bootstrap 4, membolehkan anda menyesuaikannya dengan keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Komponen Input Fail Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!