current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a form input (type='file') that I'm styling using this JQuery plugin. Basically it overlies a new span over the input element as a mask of sorts and boxes it all up in a div. The issue is that, for the second before the javascript loads, it displays the standard html input box and button (unsightly). My question is whether there is any to either

1) Hide the input element (while keeping it's clickable functionality)

OR

2) Hide the input element until the javascript kicks in to cover it up.

OR

3) Something that I haven't even thought of.

Thanks in advance!

share|improve this question
add comment

3 Answers

up vote 0 down vote accepted

This is a 100% CSS solution and doesn't require JS to check dimensions at runtime. The trick is to give the input a huge font-size, like 460px, this will push any visible part out of a wrap element:

Ex:

<div style="position:relative; width:100px; height:20px; overflow:hidden;">
     Upload button <!-- this text will be shown -->
     <input type="file" style="position:absolute; right:0; top:0; font-size:460px;" />
</div>
share|improve this answer
 
Great solution. I additionally made the background transparent and set the border to "none" and was good to go. –  neanderslob Aug 12 '13 at 17:05
add comment
up vote 0 down vote

Usually the best way of doing this is by waiting until the DOM and javascript are fully loaded, so you set your input element to be hidden, then use $(document).ready(function() {...}) to style your input when javascript is loaded

share|improve this answer
add comment
up vote 0 down vote

You can do this with CSS + Javascript.

HTML Example:

<input type="file" name="file" id="file" />

CSS to hide the file:

input#file
{
    display: none;
}

after your javascript loads, run the method to customize the input and run a show command to make the input visible after the customizations:

$('input#file').customFileInput().show();

With this way, your input file will not appear until your javascript has completed all processes with it.

share|improve this answer
 
OP wants to restyle the input field, this doesn't help him. –  Frits van Campen Aug 8 '13 at 16:29
 
Yea, gave this a try even so. Turned out that I wasn't able to get the file browse window to come up when I used this method. Thanks for the idea though. –  neanderslob Aug 9 '13 at 15:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.