Comment personnaliser l'espace réservé « Choisir un fichier... » dans l'entrée de fichier Bootstrap 4 ?

Surmonter les défis de la saisie de fichiers Bootstrap 4

Dans Bootstrap 4, le navigateur de fichiers présente le texte persistant "Choisir un fichier..." malgré la sélection du fichier. Ce problème provient de la valeur cachée dans la classe CSS custom-file-control. Bien qu'il soit possible de récupérer la valeur du fichier choisi à l'aide de JavaScript, la modification du texte de l'espace réservé peut être plus complexe.

Personnalisation du texte de l'espace réservé et de l'affichage des boutons (Bootstrap 4.1)

Avec l'introduction de Bootstrap 4.1, l'espace réservé « Choisir un fichier... » réside dans la classe custom-file-label. Pour modifier ce texte, ajoutez simplement du CSS ou du SASS personnalisé comme suit :

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

Adressage de la valeur d'espace réservé cachée

Bootstrap 4 Alpha 6 (réponse originale )

1. Modification de l'espace réservé initial et du texte du bouton :

L'espace réservé initial et le texte du bouton sont stockés dans des pseudo-éléments CSS. Pour les personnaliser, remplacez les valeurs par défaut à l'aide des sélecteurs :lang(en)::after et :lang(en)::before, respectivement.

<code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}</code>

2. Récupération du nom de fichier sélectionné et mise à jour de l'entrée :

Une fois qu'un fichier est choisi, son nom peut être obtenu à l'aide de JavaScript. Cependant, l'espace réservé étant un pseudo-élément, il n'existe aucun moyen direct de le manipuler via JavaScript. Au lieu de cela, créez une classe CSS supplémentaire pour masquer l'espace réservé une fois qu'un fichier est sélectionné :

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

Lors de la sélection du fichier, activez la classe .selected sur le .custom-file-control à l'aide de jQuery pour masquer l'espace réservé et afficher le nom du fichier :

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

Bootstrap 5

L'entrée de fichier personnalisée a été supprimée dans Bootstrap 5. Pour modifier le texte de l'espace réservé, vous pouvez utiliser JavaScript ou CSS personnalisé. Par exemple :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!