Open image dialog box when click on icon

Question

<label class="label" data-toggle="tooltip" title="Change your avatar">
<img class="rounded" id="avatar" src="https://avatars0.githubusercontent.com/u/3456749?s=160" alt="avatar">
       <input type="file" class="sr-only" id="input" name="image" accept="image/*">
     </label>

select image dialog box opens when image clicked how to make this to an icon. popup when a click icon!

<label class="btn-aux" data-toggle="tooltip" title="Change your avatar" for="profile_image" style="cursor: pointer;"><i class="ion ion-edit"></i>
         <input type="file" class="sr-only" id="input" name="image" accept="image/*"></label>

here nothing happens.....! how to do that

https://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image — Janaka Dissanayake, May 23 '18 at 07:11

score 0 · Answer 1 · answered May 23 '18 at 08:19

Do you mean this?

.ion {
  display: block;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: #fff url(https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico) 0 0 no-repeat
}
#input {
  display: none
}

<label class="label" data-toggle="tooltip" title="Change your avatar">
  <i class="ion"></i>
  <input type="file" class="sr-only" id="input" name="image" accept="image/*">
</label>

Open image dialog box when click on icon

1 Answers1