How to resize file input buttons?

Question

I work with a style input file using the opacity method - the real input button has an opacity of 0 and in front of it using z-index is another input (with opacity: 1). Unfortunately, I want my visible button to be a square picture (width: height: 1: 1) - and the invisible input file is always rectangular (input field and selection field with an aspect ratio of about 1:10). The question is how to resize the button of the input file to a square (or any size) to make the visible area of ​​the visible button pressed (because only clicking an invisible button causes the browser window to open). Now only part of the visible button is clickable.

CSS

<style type="text/css"> .upload { position:relative; width:100px; } .realupload { position:absolute; top:0; right:0; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity:0.5); z-index:2; width:100px; } form .fakeupload { background: url(images/bglines.png); } form .fakeupload input { width:0px; } </style> 

And html:

 <form> <li class="upload"> <div class="fakeupload"> <input type="text" name="fakeupload" style="opacity: 0;"/> </div> <input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" style="font-size: 5px;" /> </li> </form> 

Answer 1

We had a similar case.

It is not super elegant, but instead of entering multiple files, you can try the following:

• increased font size to increase the width of the button
• set parent relative element overflow: hidden
• (optional) Set the height to 100%

Like the demo here (based on Scott's demo)

Only works with Firefox

Answer 2

Possibly bad HTML is a problem. - You cannot have form tags outside of li tags.

It seems to work fine for me ..... Demo here

Answer 3

To shorten a file like input file by clicking a button , you can try using this:

 form .fakeupload input { width:20px; transform: scale(0.23,1); } 

This will reduce the input area of ​​the input type. (You can use transform: scale (x, y) - with x and y - this is the number that will suit your needs. Remember to add the right style for mobile devices or different browsers.

Answer 4

try using the input type "image"?

Otherwise, you will need to set the display: block parameter on the enter button.