How to do we design choose file option

Question

Am trying to solve and design My choose file button

<div id="image-upload"> 
     <form method='post' action='image.php' enctype='multipart/form-data'>
     Select a JPG or PNG File:<br />
     <input type='file' name='filename' size='10'/>
     <input class="red" type='submit' value='Upload' /></form>          
</div>

Nothing seems to help ME OUT i try few code with css also try to add class or id with css and it also dint help me out. but at last i give up.

jsfiddle : http://jsfiddle.net/deerox/8Y7p5/1/

And still wondering if there is new way to do so.

Any one have any idea please thanks :)

enter image description here

I want this choose button with some design

Just adding the `red` class [works for me](http://jsfiddle.net/8Y7p5/2/). — icktoofay, Apr 13 '13 at 04:59
@icktoofay it does not for me.. eventhough I am using the last version of FireFox — syrkull, Apr 13 '13 at 05:00
Oh, I see; I was using Chrome. I'm not sure if Firefox allows you to style it. — icktoofay, Apr 13 '13 at 05:02
duplicate : http://stackoverflow.com/questions/4909228/style-input-type-file http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript — syrkull, Apr 13 '13 at 05:03
possible duplicate of [Styling issues with a file input field in firefox](http://stackoverflow.com/questions/352467/styling-issues-with-a-file-input-field-in-firefox) — icktoofay, Apr 13 '13 at 05:04

score 1 · Accepted Answer · answered Apr 13 '13 at 05:07

try this :--

make a file upload image and put it below the file uploader

hide file upload

<div>
<input type="file" id="file1" style="display:none">
<img src="your file uploader image path" id="img1" />
</div>

JS:-

$("#img1").click(function(){
$('#file1').click();
});

How to do we design choose file option

1 Answers1