CODEWITHSUNDEEP
htmlcssfileinputresize
Kalreg
Kalreg

Reputation: 941

How to change input file button size?

I am working with styling input file with opacity method - real input file button has opacity 0 and in front of it, using z-index is another input (with opacity: 1). Unfortunatelly I want my visible button to be squared picture (width:height: 1:1) - and unvisible input file is always rectangular (input box and select box with aspect ratio about 1:10). Question is - how to resize input file button to be squared (or any size) to make whole visible button area clickable (because only clicking invisible button causes opening browser window). Now only part of on 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>

Upvotes: 13

Views: 26122

Answers (4)

born2fr4g
born2fr4g

Reputation: 1300

To shorten input type file button clickable area you can try to use this:

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

This will narrow the clickable area of input type file. (You can use transform: scale(x,y) - with x and y is number that will fits your need. Remember to add proper styling for mobile devices or different browsers.

Upvotes: 2

Rapha&#235;l
Rapha&#235;l

Reputation: 267

We had a similar case.

It's not super elegant but instead of putting multiple file input you can try as following:

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

As in the demo here (based on Scott's demo)

Only works on Firefox

Upvotes: 13

Scott
Scott

Reputation: 21892

It's possible that the malformed HTML is the problem. -- You can't have form tags outside of li tags.

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

Upvotes: 0

Devin Ceartas
Devin Ceartas

Reputation: 4829

try using the "image" input type?

Otherwise you'll have to be sure to set the display: block parameter on the input button.

Upvotes: 1

Related Questions