Блог

Главная - Вопросы по программированию - Есть ли способ заменить значок «Выбрать файл» по умолчанию пользовательским фоном изображения для поля ввода?

Есть ли способ заменить значок «Выбрать файл» по умолчанию пользовательским фоном изображения для поля ввода?

#html #css

Вопрос:

Поскольку у меня есть PWA, я могу найти только учебные пособия по загрузке изображений с помощью поля ввода. Эта часть работает, но я пытаюсь заменить значок «выбрать файл» по умолчанию пользовательским изображением.

Вот фотография того, что у меня есть: введите описание изображения здесь

Я вообще не хочу, чтобы изображение «выбрать файл» отображалось. Также есть формулировка по умолчанию «Файл не выбран». Мне просто нужно изображение, которое находится в фоновом режиме, но я не нашел ничего в Интернете, чтобы показать, как его заменить.

   .input_pic {
    background-image: url("../../../assets/image/SpaghettiPlus2.png") !important;
    background-repeat: no-repeat;
} 
             <div *ngSwitchCase="'false'">
                <ion-input class="input_pic" type="file"
                id="capture"
                accept="image"
                capture (change)="uploadFromFile($event, 'photo1')"></ion-input>              
            </div>

Комментарии:

1. Почему бы вам просто не добавить прослушиватель щелчков мыши к изображению, а затем загрузить, а затем запустить действие. Я не знаю, является ли это угловым, но это было бы легко сделать.

2. @nck это поле ввода загружает изображение в серверную часть firebase. Это единственный способ, которым я знаю, как это сделать на PWA. Поэтому, когда вы нажимаете на него, вы можете искать изображение на своем устройстве, и оно загружается. Событие щелчка на фактическом значке не обеспечивает эту функциональность.

Ответ №1:

Можно стилизовать кнопку «Выбрать ::file-selector-button «, однако с помощью этого решения вы ничего не сможете сделать с no file chosen текстом.

Ну, вы можете, установив color на transparent , но это не идеально.

 #browse::file-selector-button {
  display: none;
}

#browse {
  color: transparent;
}

#browse::before {
  content: url('https://via.placeholder.com/150');
} 
 <input type="file" id="browse">

Другое решение состоит в том, чтобы скрыть весь input элемент управления и использовать a label для запуска события просмотра элемента управления вводом.

 label {
  display: block;
  width: 150px;
  height: 150px;
  background: url("https://via.placeholder.com/150");
  cursor: pointer;
}

#browse {
  display: none;
} 
 <label for="browse" title="click to browse file"></label>
<input id="browse" type="file"> </input>

Ответ №2:

Просто перенаправьте щелчок по изображению на вход и полностью скройте ввод:

 document.querySelector("img").onclick = (evt) => {
  document.querySelector("input").click();
}; 
 input { display: none; }
img { cursor: pointer; } 
 <img src="https://picsum.photos/100/100">
<input type="file">
Метки: