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

Question

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>

vlk · Accepted Answer · 2017-05-25 06:27:27Z

19

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

answered May 25, 2017 at 6:27

vlk

1,4501 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NightKn8 Over a year ago

label solution seams to be the best. I also found it explained here: Styling an input type.

hBrent Over a year ago

I was able to use the content property in my label to avoid using an img element.

Ataur Rahman Munna · Accepted Answer · 2017-05-25 06:39:19Z

2

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>

edited May 25, 2017 at 6:39

answered May 25, 2017 at 6:27

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

Comments

KaoriYui · Accepted Answer · 2017-05-25 06:24:08Z

1

You can use for label and put the image inside instead of text, then design it what ever you want.

<div>
    <label for="browse"><img src="img/0.jpg" /></label>
    <input type="file" id="browse" name="browse" style="display: none">
</div>

answered May 25, 2017 at 6:24

KaoriYui

9221 gold badge16 silver badges45 bronze badges

Comments

electronixG · Accepted Answer · 2023-06-29 01:12:03Z

1

.image{
cursor:pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>

<label class="image" for="image-id"><i class="fa-regular fa-image"></i></label>
<input type="file" class="image" id="image-id" multiple accept="image/*" hidden>

edited Jun 29, 2023 at 1:12

answered Jun 29, 2023 at 1:05

electronixG

1861 gold badge2 silver badges20 bronze badges

Comments

Mukesh Ram · Accepted Answer · 2017-05-25 06:31:48Z

Used opacity: 0 to hide the file input and make it position: absolute

.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"] {
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  opacity: 0;
  width: 32px;
  z-index: 1;
}
#icon_upload {
  font-size:30px;
  cursor: pointer;
}

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

Morten · Accepted Answer · 2023-12-05 16:04:27Z

0

Give the input a name and hide it with CSS <input style="display:none" class="hidden" type="file" capture="camera" accept="image/*" multiple #cameraInput id="cameraInput" name="cameraInput">

Then create a button which holds your nice photo (material symbol in this example) and use script to call click() on the cameraInput <button type="button" (click)="cameraInput.click()"> photo_camera

answered Dec 5, 2023 at 16:04

Morten

1792 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related