Question

I used below code for customize the file input type,

<form class="example" action="#">
<!--<input type="file" class="required-entry filename file" name="filename[]" />-->
<div class="fileinputs">
    <input type="file" class="file hidden">
<div class="fakefile"><input><img src="ravi/images/button_select.gif" /></div></div>
</form>

style.css

<style type="text/css">
    body{
        color: black;
        font-family: arial;
        font-size: 13px;
    }
form.example input {
    background: url('ravi/images/input_boxes.gif') no-repeat 0 -58px;
    border: none;
    width: 241px;
    height: 20px;
    padding-left: 3px;
    padding-top: 3px;
}

form.example input:focus {
    background-color: transparent;
}

form.example div.fileinputs {
    position: relative;
    height: 30px;
    width: 300px;
}

form.example input.file {
    width: 300px;
    margin: 0;
}

form.example input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}

form.example div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 350px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}

form.example div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
}

</style>

and the page display like below,

when i click select button the browse folder appears and then i select the image file.but in input filed the uploaded image caption not displayed..

i integrated this one from http://www.quirksmode.org/dom/inputfile.html

what is the issue?

Answer 1

You need to add JavaScript code as explained on the page you cited.

If the code you use in testing consists essentially of the HTML and CSS code that you posted, then you are using the “pure CSS” version of the approach described on the page. In the numbered list that explains the basic version, which uses JavaScript too, item 5 describes the feature that is missing from the “pure CSS” version. And that feature is “When the user has selected a file, the visible, fake input field should show the correct path to this file”.

(It won’t actually show the correct path. For security reasons, browsers don’t disclose the real path. But they do let you show the filename part.)