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.

Answer 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.