相关疑难解决方法(0)

用于文件上传按钮的跨浏览器自定义样式

我正在尝试根据个人喜好设置文件上传按钮的样式,但如果没有JS,我找不到任何真正可行的方法.我确实找到 关于这个主题的另外两个问题,但那里的答案要么涉及JavaScript,要么建议采用Quirksmode的方法.

这个Quirksmode方法的主要问题是文件按钮仍然具有浏览器定义的尺寸,因此它不会自动调整为用作放置在它下面的按钮的任何东西.我已经制作了一些基于它的代码,但它只占用了文件按钮通常占用的空间,所以它根本不会像我想要的那样填充父div.

HTML:

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

这个小提示演示了这种方法是如何存在严重缺陷的.在Chrome中,单击!!下面的第二个演示按钮将打开文件对话框,但在所有其他浏览器中,文件按钮不会占用按钮的正确区域.

有没有更坚实的方式来设置文件上传按钮的样式,没有任何JavaScript,并且最好使用尽可能少的"hacky"编码(因为黑客通常带来其他问题,例如小提琴中的那些)?

html css file-io cross-browser

104
推荐指数
3
解决办法
15万
查看次数

如何从Chrome中的文件输入中删除"未选择文件"工具提示?

我想从Google Chrome中的文件输入中删除"未选择文件"工具提示(我发现Firefox中没有显示工具提示).

请注意,我所说的不是输入字段中的文本,而是关于将鼠标移到输入上时出现的工具提示.

我试过这个没有运气:

$('#myFileInput').attr('title', '');
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery google-chrome

73
推荐指数
8
解决办法
13万
查看次数

如何使用 Bootstrap 5 更改“选择文件”文本

是否不可能像 Bootstrap 4 一样使用 CSS 更改 Bootstrap 5 中输入文件的选择文件文本?

如何为“未选择文件”添加边距?

在此输入图像描述

html css file-upload bootstrap-5

12
推荐指数
2
解决办法
3万
查看次数

如何让文件被选中

我正在使用旧版本构建一个颤振网络。我有一个 FileUploadInputElement。我需要从该元素中选择文件。

@override
  Widget build(BuildContext context) {
    FileUploadInputElement fileUploadInputElement = FileUploadInputElement();
    ui.platformViewRegistry.registerViewFactory(
        'animation-Image-html', (int viewId) => fileUploadInputElement);



    return SizedBox(
      child: HtmlElementView(
        viewType: 'animation-Image-html',
      ),
    );
}
Run Code Online (Sandbox Code Playgroud)

flutter-web

3
推荐指数
1
解决办法
4732
查看次数