Maison > interface Web > tutoriel CSS > le corps du texte

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

Barbara Streisand
Libérer: 2024-10-30 17:31:25
original
529 Les gens l'ont consulté

How to Customize the

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!