CODEWITHSUNDEEP
javascripthtmlcssinputw3.css
Patrick
Patrick

Reputation: 313

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.

Upvotes: 3

Views: 1662

Answers (2)

ywDing
ywDing

Reputation: 61

Setting the input element's display property to hidden, then setting the button element's click event to trigger the input element's click event.

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

Upvotes: 0

bob
bob

Reputation: 993

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

Upvotes: 1

Related Questions