Custom CSS/HTML Browse For Image Form

Question

Possible Duplicate:
Style input type file?

I know that each browser has its own way of displaying a...

 <input type="file" name="image" id="image" class="input_text"/>

My question is, is there a way to customize the browse for image button. I would like to replace the browse and upload buttons on the normal form to one image button using HTML/CSS/PHP. Is this possible and is it compatible with all browser types.

Thanks you.

score 1 · Answer 1 · answered Dec 06 '12 at 22:20

1

You're probably better off using a plugin like Uploadify. It'll allow you to style the field like any other element.

answered Dec 06 '12 at 22:20

Alex

34,899
5
77
90

score 1 · Accepted Answer · answered Dec 06 '12 at 22:21

1

There are multiple ways, the way I prefer is this:

<div class="browse">
    <div class="placeholder">Upload</div>
    <input type="file" name="image" id="image" class="input_text"/>
</div>

With this CSS-code:

.browse {
    position: relative;
    width: 100px;
    height: 20px;
}

.browse input, browse div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.browse input {
    opacity: 0;
    filter: alpha(opacity=0);
}

This way the upload text will be shown but you will actually click the browse button.

answered Dec 06 '12 at 22:21

Dillen Meijboom

963
7
13

Yes but instead of their being a button that says "Choose File" I would like to replace that with and image that does that. – Keith Drake Waggoner Dec 06 '12 at 22:24
Then replace:
Upload
with:
– Dillen Meijboom Dec 06 '12 at 22:25
ok that worked thank you one more question though. After I browse and choose my file does that submit the form? – Keith Drake Waggoner Dec 06 '12 at 22:29
No, you can put an onchange event on the input if you'd like to? Just replace: with – Dillen Meijboom Dec 06 '12 at 22:31

Custom CSS/HTML Browse For Image Form

2 Answers2