上傳的文件名中的自定義文件輸入

我用下面的代碼進行定製文件輸入型不顯示，上傳的文件名中的自定義文件輸入

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

和頁面顯示如下圖所示，

enter image description here