Wie viele Leute wollte ich das hässliche input type=file，并且我知道如果没有一些 hack 和/或 javascript 就无法完成。但是，问题是，就我而言，上传文件按钮仅用于上传图像（jpeg|jpg|png|gif），所以我想知道是否可以使用“clickable"-Bild genau an die Eingabetypdatei anpassen (zeigt den Dialog und zeigt dasselbe $_FILE auf der übermittelten Seite an).
Ich habe hier eine Problemumgehung gefunden, die ebenfalls interessant ist (aber in Chrome =/ nicht funktioniert).
Was machen Sie, wenn Sie der Dateischaltfläche etwas Stil verleihen möchten? Wenn Sie dazu eine Meinung haben, klicken Sie bitte auf die Antwortschaltfläche ;)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这对我来说非常有效：
.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 属性使得单击标签与单击指定的输入相同。
此外，将显示属性设置为 none 可以使文件输入根本不呈现，从而将其隐藏得干净整洁。
在 Chrome 中进行了测试，但根据网络，应该适用于所有主要浏览器。 :)
编辑： 此处添加了 JSFiddle： https://jsfiddle.net/c5s42vdz/