CSS input type = "file" скрыт, но только для 1 класса? - PullRequest
Новая
       13

CSS input type = "file" скрыт, но только для 1 класса?

0 голосов
/ 27 января 2020

У меня странная проблема с моим пакетом Nuget, когда Blazor [Параметр] работает как ссылка на проект, чтобы не отображать стандартную кнопку с ShowCustomButton = true или false.

Позже сегодня я настрою пользовательский канал для отладки пакета Nuget, так как он может быть связан со связанной таблицей стилей: 

<link href="~/_content/DataJuggler.Blazor.FileUpload/styles.css" rel="stylesheet" />

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

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button 
{ 
    /* chrome and blink button */
    cursor: pointer;
}

Я легко могу решить проблему Nuget в проекте, который его использует, добавив отображение: нет; 

input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button 
{ 
    /* chrome and blink button */
    cursor: pointer;
    display: none;
}

Проблема в том, что мой образец страницы имеет два образца загрузки файлов, один со стандартной кнопкой, а другой с пользовательской кнопкой. Если я реализую решение, описанное выше, стандартная кнопка перестанет отображаться (как и предполагалось).

Я понимаю, что за пределами моего примера проекта большинство разработчиков будут либо показывать пользовательскую кнопку, либо нет, а не комбинацию обоих в тот же проект, но ради знаний я хотел бы иметь возможность сделать что-то вроде: 

.customfileupload
{
    input[type=file]
    { 
        display: none;
    }
}

Visual Studio не нравится вышеуказанный формат, поэтому я уверен, что он не действителен CSS .

Как гласит заголовок, есть ли способ выбрать вход [type = file], но только для 1 класса?

В случае, если я не объясняю это правильно, и кому-то скучно и хочется чтобы помочь проекту с открытым исходным кодом, код и пример здесь:

https://github.com/DataJuggler/BlazorFileUpload

Чтобы дублировать проблему, сначала запустите образец проекта, и вы увидите обе кнопки:

enter image description here

Затем удалите проекты BlazorInputFile и BlazorFileUpload и добавьте пакет Nuget DataJuggler.Core.FileUpload в проект примера.

Запустите проект снова, и вы видите:

enter image description here

Это просто сбивает с толку, потому что Nuget обычно работает так же, как ссылка на проект.

Спасибо. У меня один из этих компьютеров делает то, что вы им говорите, а не то, что вам нужно.

Ответы [ 2 ]

0 голосов
/ 27 января 2020

Альваро Менендес получает кредит, и я просто публикую его ответ в этом разделе.

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

Я запишу это как «То, что я узнал сегодня».

Спасибо, Альваро! 

.customupload
{
    display: inline-block;
    visibility: visible;
}
.customupload input[type=file]
{
    visibility: hidden;
    display: none;
}
0 голосов
/ 27 января 2020

Для ввода файла требуется другой стиль CSS, чем для кнопок. Может быть это поможет или это .

...