Patrick Patrick - 24 days ago 6
Javascript Question

how can I combine button with 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" >
<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.

bob bob
Answer

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