如何将按钮与输入结合起来？

Question

<!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> 创建一个带有文本 "No file selected"

的 "browse..." 按钮

我还有一个图像图标作为按钮。

如何用图标按钮代替浏览按钮？

单击图标按钮后，它会打开目录让我选择图像。

感谢您的帮助。

我正在使用 w3.css 框架。

Answer 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">

Answer 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>

如何将按钮与输入结合起来？

how can I combine button with input?

html

javascript

css

input

w3.css