Blank custom file input using bootstrap4

Question

I am trying to implement the custom-file-input using bootstrap4 alpha 6, but I get blank section after adding it, as following:

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

Is there's any CSS style that I should add with this implementation?

Carol Skelly · Accepted Answer · 2017-04-15 23:58:43Z

1

As explained in the docs, the placeholder and button are set in CSS:

.custom-file-control::after {
  content: "Select file...";
}

.custom-file-control::before {
  content: "Click me";
}

Also, you can use a language declaration in the HTML doc. For example,

<html lang="en"></html>

and set specific style for each language...

.custom-file-control:lang(en)::after {
  content: "Select file...";
}

.custom-file-control:lang(en)::before {
  content: "Click me";
}

answered Apr 15, 2017 at 23:58

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1