边缘浏览器隐藏默认文件上传

Question

我有一个开源项目和一个名为DataJuggler.Blazor.FileUpload的Nuget包。 （https://github.com/DataJuggler/BlazorFileUpload）

使用Chrome，以下功能可显示“文件上传”的自定义按钮：

 <FileUpload CustomSuccessMessage="Your file uploaded successfully." OnChange="OnFileUploaded"
    OnReset="OnReset" ResetButtonClassName="localbutton"
    ShowStatus="false"  PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
    ShowCustomButton="true"  ButtonText="Start" CustomButtonClassName="startbutton" 
    AllowedExtensions=".jpg;.png;" ShowResetButton="false" 
    CustomExtensionMessage="Only .jpg and .png files are allowed." 
    AppendPartialGuid="true" InputFileClassName="customfileupload" 
    FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>

.customfileupload
{  
    display: inline-block;
    cursor: pointer;
    height:48px;
    min-height: 48px;
    visibility: hidden;
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
}

.startbutton
{
    position: fixed;
    background-color: transparent;
    border: 0px;
    outline: none;
    background-image: url('../images/StartButton.png');
    background-repeat: no-repeat;
    top: 36vh;
    left: 50%;
    width: 28%;
    height: 28%;
    background-size: 100%;
    margin-left: -14%;
    cursor: pointer;
}

这段CSS隐藏了Chrome上的默认文件输入

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

在Chrome上，标准文件输入被隐藏，但在Edge上显示：

谢谢，我不经常使用Edge，但是我想知道如何为需要使用Edge的用户修复它。

Answer 1

感谢Magoo先生，我根据可见参数重构了组件是否使用hidden属性：

[Parameter] public bool Visible { get; set; } = true;

然后在标记中根据Visible的值渲染或不渲染：

@if (Visible)
{
    <input type="file" class="@InputFileClassName" @ref="inputFileElement" 
            @attributes="UnmatchedParameters" />
}
else
{
    <input type="file" class="@InputFileClassName" @ref="inputFileElement" 
            @attributes="UnmatchedParameters" hidden />
}

然后我在包装器组件中添加了一个Visible属性，现在我要在不希望使用默认输入的情况下设置Visible = false，它可以在Chrome和Edge上使用。我尚未测试Firefox，但我想它也可以在其中运行。

再次感谢Magoo先生。有趣的是，对于曾经打过9球或一个口袋打赌我的人来说，Magoo先生是我以前听到的更好的事情之一。