Можно ли заменить кнопку, отображаемую компонентом Blazor InputFile, другим элементом?
Я использую этот элемент для загрузки файлов изображений на мой размещенный сайт Blazor WASM. Компонент отображает кнопку со словами «Выбрать файлы».
Я хотел бы заменить эту кнопку изображением (или своим собственным текстом, или чем-то еще). Я попытался с помощью CSS установить фоновое изображение для URL-адреса изображения, которое я хотел бы использовать, и установить для цвета фона кнопки значение «прозрачный», но это, похоже, ничего не меняет.
Ответы 1
Исходный код этого компонента можно найти здесь: https://github.com/SteveSandersonMS/BlazorInputFile
Я изучил код и обнаружил, что этот компонент построен с использованием стандартного типа ввода Blazor.
<input type=file>
Стив показывает способ переопределить функциональность и стиль кнопки по умолчанию с помощью CSS.
Вот пример, который я создал на основе того, что нашел:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class = "file-input-zone">
<InputFile />
Get me a file!
</div>
Это даст вам кнопку, которая выглядит так:
Вы можете получить больше советов, изучив его исходный код.
@Stuart, пожалуйста, внимательно посмотрите на CSS в моем примере. Я подозреваю, что «курсор: указатель» - это то, чего вам не хватает. Примечание: вам нужно это в двух местах
Спасибо за ваш ответ @Jason. У меня точно так же настроен стиль курсора. Я могу изменить размер ввода и сделать его видимым и видеть, что курсор возвращается к указателю по умолчанию только при наведении курсора на эту «кнопку». Я также могу сделать всю зону ввода файла очень большой, и только небольшая область ввода будет вести себя таким образом. (То же самое происходит в примере перетаскивания в исходном коде, на который вы ссылаетесь.) Но очевидно, что ваш пример работает, так что это довольно интригующе. Может попробовать разные браузеры. (Использовал только Chrome - но ваш образец там тоже работает.) :-(
@Stuart, я думаю, будет лучше, если вы откроете новый вопрос в SO с минимально воспроизводимым примером. Это лучший способ помочь кому-то из сообщества. stackoverflow.com/help/минимально-воспроизводимый-пример
Это приятно, спасибо, и просмотр связанного исходного кода также помог. Один незначительный сбой, который у меня все еще есть с этим решением, заключается в том, что (скрытая) область «зоны ввода файла», которая содержит кнопку «Выбрать файл» (а не текст, показывающий имя файла или сообщение «нет файла») не показывать курсор-указатель, когда вы наводите на него курсор, например, ваш "Get me a file!" пример делает. Как вы это решили? Я заметил, что «пример перетаскивания в связанном коде имеет ту же проблему.