我正在尝试根据个人喜好设置文件上传按钮的样式,但如果没有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"编码(因为黑客通常带来其他问题,例如小提琴中的那些)?
我想从Google Chrome中的文件输入中删除"未选择文件"工具提示(我发现Firefox中没有显示工具提示).
请注意,我所说的不是输入字段中的文本,而是关于将鼠标移到输入上时出现的工具提示.
我试过这个没有运气:
$('#myFileInput').attr('title', '');
Run Code Online (Sandbox Code Playgroud) 是否不可能像 Bootstrap 4 一样使用 CSS 更改 Bootstrap 5 中输入文件的选择文件文本?
如何为“未选择文件”添加边距?

我正在使用旧版本构建一个颤振网络。我有一个 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) css ×3
html ×3
bootstrap-5 ×1
file-io ×1
file-upload ×1
flutter-web ×1
javascript ×1
jquery ×1