HMA HMA -3 years ago 78
HTML Question

How do I turn an <li> tag into the file input (browse) button in HTML/Bootstrap?

I am working on getting an

<li>
with an icon and a link tag (
<a>
) to act as browse button, and therefore becoming an input for a file.

What i have originally:

<ul>

<li><a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Video Media"><i class="fa fa-video-camera"> </i></a></li>
<li> <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Photos" ><i class="fa fa-picture-o"></i></a> </li>

</ul>


and it looks like this:

Original snapshot

I tried inserting
<input type=”file”> </input>
at a couple positions, did not work, instead I got the "Choose file" button on top of my icons, what i ant to do is not displaying the "choose file" button but rather have my icon buttons shown to be it.

Code for failed try(only for photos
<li>
icon):

<ul>

<li><a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Video Media"><i class="fa fa-video-camera"> </i></a></li>
<li> <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Photos" ><input id="upload-file" type="file"><i class="fa fa-picture-o"></i></a> </li>

</ul>


And the result was :

Failed try snapshot

Thanks

Answer Source

#upload-file{
  display: none;
}

label[for=upload-file]{

}
<ul>

 <li>
   <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Video Media">
     <i class="fa fa-video-camera"> </i>
   </a>
 </li>
 <li>  
   <a title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Add Photos" >
     <input id="upload-file" type="file">
     <label for="upload-file">
       <i class="fa fa-picture-o"></i>
     </label>
   </a>  
 </li> 

</ul> 

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download