Почему у меня есть две кнопки загрузки на странице laravel blade?

Question

Я не могу решить проблему, когда вижу две кнопки загрузки на странице.

Laravel Фрагмент файла Blade:

<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 классы. Если вы используете bootstrap, посмотрите документацию:

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>