如何将按钮与输入相结合？答案

【问题标题】：how can I combine button with input?如何将按钮与输入相结合？
【发布时间】：2016-11-15 22:52:46
【问题描述】：

<!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 框架。

【问题讨论】：

请为您的代码创建一个 Plunker 或 JSFiddle 示例。谢谢。
此链接是特定于引导程序的，但您可以根据需要对其进行调整：abeautifulsite.net/…
使输入文件的可见性为零，并使用绝对定位将其放置在按钮上。还将其尺寸设置为与按钮的尺寸相同。

标签： javascript html css input w3.css

【解决方案1】：

通过将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">

【讨论】：

【解决方案2】：

设置input元素的显示属性为隐藏，然后设置button元素的点击事件触发input元素的点击事件。

<!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" style="display: none;">
    <button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left">
        <i class="material-icons">image</i>
    </button>
</form>
<script src="jquery.js"></script>
<script>
    $('#submitImage').on('click', function(){
        $('#mediaCapture').trigger('click');
    });
</script>
</body>
</html>

【讨论】：