gpt4 book ai didi

css - 用图像替换输入类型=文件

转载 作者:数据小太阳 更新时间:2023-10-29 09:07:23 24 4
gpt4 key购买 nike

像很多人一样,我想自定义丑陋的input type=file,而且我知道如果没有一些 hack 和/或 javascript<,这是无法完成的。但是,在我的情况下,上传文件按钮仅用于上传图像 (jpeg|jpg|png|gif),所以我想知道我是否可以使用“clickable"图像,它将完全充当输入类型文件(显示对话框,并在提交的页面上显示相同的 $_FILE)。
我找到了一些解决方法 here , 和 this interesting one也是(但不适用于 Chrome =/)。

当你想给你的文件按钮添加一些样式时,你们会怎么做?如果您对此有任何看法,请点击回答按钮;)

最佳答案

这对我来说非常有效:

.image-upload>input {
display: none;
}
<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>

<input id="file-input" type="file" />
</div>

基本上,标签的 for 属性使得点击标签与点击指定输入相同

另外,将 display 属性设置为 none 使得文件输入根本不呈现,将其隐藏得很干净。

已在 Chrome 中测试,但根据网络,应该适用于所有主流浏览器。 :)

编辑:在此处添加了 JSFiddle:https://jsfiddle.net/c5s42vdz/

关于css - 用图像替换输入类型=文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2855589/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com