<!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元素的display属性设置为hidden,您仍然可以通过单击label元素来触发文件选择过程。将您的图标放在label内并相应设置样式。

确保for元素的label属性与文件idinput匹配

<style>
  .hidden {display:none;}
</style>
<label for="mediaCapture">
  <i class="material-icons">image</i>
</label>
<input type="file" class="hidden" id="mediaCapture">

10-07 19:05
查看更多