css - 为什么输入文件不显示文本 "Browse"？

Question

我使用 Bootstrap ，但在类型文件的表单字段中没有出现“浏览”文本，您知道为什么吗？它只显示像输入文本字段一样的输入，没有任何“浏览”按钮。

HTML:

<div class="form-row">
  <div class="form-group col col-lg-6">
    <label for="image">Select an Image</label>
    <label class="custom-file">
      <input type="file" id="file" name="image" value="" class="custom-file-input">
      <span class="custom-file-control"></span>
    </label>
  </div>
</div>

Answer 1

请看下面两个例子。问题是您使用的是 custom-file-input 类，而不是 form-control-file。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-row">
  <div class="form-group col col-lg-6">
    <label for="image">Select an Image</label>
    <label class="custom-file">
      <input type="file" id="file" name="image" value="" class="custom-file-input">
      <span class="custom-file-control"></span>
    </label>
  </div>
</div>

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>