<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<form id="image-form" action="#" class="w3-container w3-border w3-margin-top">
<input id="mediaCapture" type="file" accept="image/*,capture=camera" >
<button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left">
<i class="material-icons">image</i>
</button>
</form>
</body>
</html>
<input>创建一个带有文本“未选择文件”的“浏览...”按钮
我还有一个图像图标作为按钮。
如何用图标按钮替换浏览按钮？
单击图标按钮后，它会打开目录让我选择图像。
感谢您的帮助。
我正在使用 w3.css 框架。
最佳答案
通过将 input 元素的显示属性设置为 hidden，您仍然可以通过单击 label 元素来触发文件选择过程。将您的图标放在 label 中并相应地设置样式。
确保 label 元素的 for 属性与文件 input 的 id 相匹配
<style>
.hidden {display:none;}
</style>
<label for="mediaCapture">
<i class="material-icons">image</i>
</label>
<input type="file" class="hidden" id="mediaCapture">
关于javascript - 如何将按钮与输入结合起来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40621162/