0

i have multiple custom-file dialogs in bootstrap 4 on my site. I know how i can set the custom-file-text via scss variables like this: 

$custom-file-text: (
    placeholder: (
      en: "Choose file...",
      es: "Seleccionar archivo...",
      de: "Datei wählen..."
    ),
    button-label: (
      en: "Browse",
      es: "Navegar",
      de: "Durchsuchen"
    )
  );

But this would be applied to all my available custom-file dialogs. How can i set the texts for each custom-file dialog individually?

Opa114
  • 518
  • 4
  • 12
  • 28

1 Answers1

1

If you merely want to change the placeholder and not the button-label one very simple trick is to enter text in the .custom-file-control <span>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<label class="custom-file">
  <input type="file" id="file2" class="custom-file-input">
  <span class="custom-file-control">Ermagherd!</span>
</label>

That being said... it is worth considering whether you should change the values offered here, as any deviation from clear indications that a user clicking this component should expect a file window to appear may cause confusion.

Note: StackOverflow doesn't seem to be rendering the custom-file component quite right; you can view this same code on Bootply: https://www.bootply.com/IcMAXzCHxj

Robert
  • 6,881
  • 1
  • 21
  • 26
  • that's quite a simple solutions - thanks. But can i do it with te global variable $custom-file-text in my sass file, too. Like appending a custom class to the custom-file-control span class? if yes, how can i do this? – Opa114 Dec 23 '17 at 17:06
  • For that answer you might want to read this SO question, as it seems to change with each iteration of Bootstrap 4: https://stackoverflow.com/questions/31329177/bootstrap-sass-variable-override-challenge – Robert Dec 26 '17 at 14:33