Home/ Questions/Q 3961284
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T02:57:24+00:00

I want to have an <input type=’file’> that overlaps on an image, so that

  • 0

I want to have an <input type='file'> that overlaps on an image, so that when the user clicks on it, the file upload dialog opens, and the image uploads via AJAX.

So I want CSS to style the field in such a way that either only the browse button is visible (with no associated box), or even better, only a transparent button is visible with overlapping text like “change photo”, nothing else.

Needs to work on:

  • FF 3+
  • IE 7+ (pref 6+)
  • Chrome 5+
  • Safari 3+
  • Opera 9+
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    File input opacity test => http://www.jsfiddle.net/steweb/LVjFy/ ..set its opacity to 0 and it’s fully transparent but clickable!

    Another example with img and transparent file input => http://www.jsfiddle.net/steweb/LVjFy/2/

    EDIT (+ js that simulates the file input click): http://www.jsfiddle.net/steweb/LVjFy/6/ ..don’t need to set opacity (EDIT2 needs to be tested, isn’t working on FF)

    • 0