为什么在laravel刀片页面上有两个上传按钮？

Question

我无法解决页面上有两个上传按钮的问题。

Laravel刀片文件片段：

<div class="col col-12 col-md-12 col-lg-12 col-xl-12">
        <div class="form-group">
            <label class="form-lable">Image</label>
            <div class="file-group">
                <label class="btn btn-primary btn-square" for="select-file">Select</label>
                <input id="select-file" type="file" name="image" class="file-control">
                @if(!empty($entity->imageThumbUrl))
                    <br>
                    <a target="_blank" href="{{$entity->imagePreviewUrl}}">
                        <img src="{{$entity->imageThumbUrl}}" style="width: 200px;" alt="">
                    </a>
                @endif
            </div>
        </div>
    </div>

如果我从标签上删除了按钮样式，并将其应用于输入，我将得到以下结果：

Answer 1

对于相同的输入，您有两个标签。您在第二个输入标签上也有“按钮”类。因此，它的样式就像一个按钮。

使用了错误的类：<label class="btn btn-primary btn-square" for="select-file">Select</label>

使用不同的CSS类。如果您使用的是引导程序，请查看文档：

https://getbootstrap.com/docs/4.4/components/input-group/#custom-file-input

您可能想要这样的东西：

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>