Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide input file and style the input="file" to icon/image

I want the input="file" to be hidden and style the input="file" with icon and clicking upon the icon to select image.

.cover_photo {width:100%; height:250px; overflow:hidden; position:relative;}
.cover_photo img {width:100%;}
.upload_btn { position:absolute; top:0; left:0;}
.upload_btn input[type="file"] {display:none;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section>
	<div class="container-fluid">
    	<div class="row">
        	<div class="col-md-12">
            	<div class="cover_photo">
                  <img class="img-responsive" src="http://underafricanskiessafaris.co.za/wp-content/uploads/2015/02/BG-1.jpg" />
                  <div class="upload_btn">
                    <form>
                        <i id="icon_upload" class="fa fa-camera"></i>
                        <input type="file" name="cover-photo" id="icon_upload" />
                      </form>
                  </div>
                </div>
            </div>
        </div>
    </div>
</section>
like image 563
User113 Avatar asked May 25 '17 06:05

User113


People also ask

How do you make an input type file invisible?

By keeping <​input> elements of visibility hidden, let web developers include data that cannot be seen or modified by users when a form is submitted. As a result, the input fields of type file having visibility hidden, cannot be access using any access specifiers directly.

Can I style input type file?

Ordinary input of type file in webpages comes with a default style and the caption, choose file. The good news is that we can style and tweak it to what we want.


2 Answers

With label

#fileInput{
  display: none;
}
#icon{
  width: 100px;
  cursor: pointer;
}
<label for="fileInput"> 
  <img id="icon" src="https://image.freepik.com/free-icon/upload-arrow_318-26670.jpg">
</label>
<input id="fileInput" type="file">
like image 98
vlk Avatar answered Sep 19 '22 19:09

vlk


I think you want something like this.Place an icon and clicking on the icon, programmatically click the input type file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type="file" id="file_upload_id" style="display:none">

<label>Upload:</label>&nbsp;&nbsp;<a href="#"><i id="icon_upload" class="fa fa-upload" onclick="_upload()"></i></a>

<script>
function _upload(){
    document.getElementById('file_upload_id').click();
}
</script>
like image 24
Ataur Rahman Munna Avatar answered Sep 17 '22 19:09

Ataur Rahman Munna