input type=file label customize

by Yoshiharu Kamata

HTML

<div>
    <input type="file" name="native" />
</div>
<div>
    <input type="text" name="file_value" id="file_value" />
    <button id="file_select">select</button>
    <input type="file" name="file_dummy" id="file_dummy" class="dummy" />
</div>
<div>
    <div class="left cnt">
        <input type="file" name="file" />
    </div>
    <div class="left">
        <button>select</button>
    </div>
</div>
<div id="console"></div>

CSS

.cnt{
    overflow:hidden;
    width: 115px;
}
.left{
    float: left;
}
.dummy{
    position: absolute;
}

JavaScript

$("#file_dummy").change(function() {
    $("#file_value").val($(this).val());
});
$("#file_select").click(function() {
    $("#file_dummy").click();
});
$("#file_dummy").css("opacity",0);