gpt4 book ai didi

javascript - 如何将按钮与输入结合起来?

转载 作者:可可西里 更新时间:2023-11-01 13:47:08 26 4
gpt4 key购买 nike

<!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 属性与文件 inputid 相匹配

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com