Empty custom file input with bootstrap4

Question

I'm trying to implement a custom file input using bootstrap4 alpha 6, but after adding it to the following header:

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

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

+3

CairoCoder Apr 15. 17 at 5:37 am

1 answer

ZimSystem · Accepted Answer · 2017-04-15T23:58:43+0000

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";
}

Alternatively, you can use a language declaration in your HTML document. For example,

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

and set a specific style for each language ...

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

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