使用bootstrap4输入空白自定义文件

时间:2017-04-15 05:37:27

标签: css twitter-bootstrap input bootstrap-4 twitter-bootstrap-4

我正在尝试使用bootstrap4 alpha 6实现自定义文件输入,但是在添加后我得到空白部分,如下所示:

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

Bootstrap4 file browser documentation

Blank file input

我应该在此实现中添加任何CSS样式吗?

1 个答案:

答案 0 :(得分:1)

如文档中所述,占位符和按钮在CSS中设置:

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

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

http://www.codeply.com/go/jcnmleDWja

此外,您可以在HTML文档中使用语言声明。例如,

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

并为每种语言设置特定的样式......

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

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

http://www.codeply.com/go/jcnmleDWja