如何在Bootstrap中自定义输入类型文件按钮

Question

我正在制作一个简单的表单，我需要一个按钮来上传一些文件。 我正在使用 bootstrap，我发现创建文件类型的输入字段并为其分配像 btn btn-success 这样的类的典型方法并没有按照我想要的方式工作。

鳕鱼：-

<label> Upload File : </label>
<input type="file" class=" btn btn-success form-control required" id="file" name="file" ng-model="Form.file" required>

以下代码的输出看起来像 -

我不希望按钮在“ChooseFile”未选择文件上显示丑陋的文本。 我怎样才能使它成为普通按钮，并在“上传”上添加文本并具有相同的功能。

Answer 1

你快明白了。

1. 将输入放入标签内
2. 将

   btn*

   类名称移至标签
3. 通过将

   d-none

   添加到其类来隐藏输入

代码：

<label class="btn btn-success">Upload File :
    <input type="file" class="form-control required d-none" id="file" name="file" ng-model="Form.file" required>
</label>

Answer 2

对于上传控件美化，我建议您使用Dropify进行表单控件，如果您想做一些验证，它就足够有用了。