9

As you may know, you can make your own file input control using the (hacky) approach of positioning the file input over your custom button and using opacity: 0 on the file input itself.

The image below shows the intended design with the file input absolutely positioned over the browse button.

Example

As you can see, the faux browse button is much larger than the one the browser (Firefox 4) has drawn.

If I increase the width of the input, it seems to reach a limit where it won't increase anymore.

Here is a jsFiddle to play with, demonstrating the problem. The real browse button should be the same size as the faux one.

Is there a way to pull this off, or must I use Flash or make the button smaller?

alex
  • 479,566
  • 201
  • 878
  • 984
  • I messed with it a little. It works in Chrome and IE. Does not seem to work in FireFox 4 :(. But this method uses a label. http://jsfiddle.net/rH5SY/3/
    The idea was to create a fake browse button but triggers the real one which is hidden.     – Keverw Jun 27 '11 at 01:03

1 Answers1

5
font-size:70px;

http://jsfiddle.net/rH5SY/9/

MikeM
  • 27,227
  • 4
  • 64
  • 80