Replace input type=file by an image

by

This works really well for me:

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>

Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input.

Also, the display property set to none makes it so that the file input isn’t rendered at all, hiding it nice and clean.

Tested in Chrome but according to the web should work on all major browsers. 🙂

EDIT:
Added JSFiddle here: https://jsfiddle.net/c5s42vdz/

More Related Contents:

  1. input type=”image” shows unwanted border in Chrome and broken link in IE7
  2. create a custom button [closed]
  3. Center multiple images horizontally in CSS
  4. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  5. How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
  6. SVG data image not working as a background-image in a pseudo element
  7. How to style HTML5 range input to have different color before and after slider?
  8. How to make button look like a link?
  9. Style input type file? [duplicate]
  10. CSS Image size, how to fill, but not stretch?
  11. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  12. How to vertically align an image inside a div
  13. How can I resize an image dynamically with CSS as the browser width/height changes?
  14. Embed image in a element
  15. Drop shadow for PNG image in CSS
  16. How can I change a button’s color on hover?
  17. Replacing H1 text with a logo image: best method for SEO and accessibility?
  18. CSS Input with width: 100% goes outside parent’s bound
  19. How to put an image in div with CSS?
  20. Responsive Images with CSS
  21. Removing the image border in Chrome/IE9
  22. How to remove outline border from input button
  23. Hide Up & Down Arrow Buttons (Spinner) in Input Number – Firefox 29
  24. Define an ‘s src attribute in CSS [duplicate]
  25. Styling twitter bootstrap buttons
  26. vertical-align image in div [duplicate]
  27. How to use images in css with Webpack
  28. Firefox blurs an image when scaled through external CSS or inline style.
  29. What is the best way to replace the file browse button in html?
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment