<input>创建一个“浏览...”按钮，文本“未选择文件”
我还有一个图像图标作为按钮。
如何将图标按钮替换为浏览按钮？
一旦我点击图标按钮，它将打开目录让我选择图像。
谢谢你的帮助。
我正在使用w3.css框架。
<!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>The <input> creates a "browse..." button with text "No file selected"
I also have a image icon as a button.
How can I substitute the icon button for browse button?
Once I click the icon button, it will open up the directory to let me choose image.
Thanks for any help.
I am using w3.css framework.
最满意答案
通过将input元素的display属性设置为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">By setting the input element's display property to hidden, you can still trigger the file selection process by clicking on the label element. Place your icon inside the label and style accordingly.
Make sure the for attribute of the label element matches the id of the file input
<style> .hidden {display:none;} </style> <label for="mediaCapture"> <i class="material-icons">image</i> </label> <input type="file" class="hidden" id="mediaCapture">更多推荐
image,id,电脑培训,计算机培训,IT培训"/> <meta name="description" co
发布评论