How to change the "Browse" button style of the file type

Original article: http://www.cftea.com/c/2009/10/22Y1CTEYZTR7S5S3.asp

In the current webpage, the input file type input box with the type of file is often encountered. I thought I tried to use CSS to modify the button style, and even the style of the input box was changed, now, how can we solve this problem? It has been a while to learn about JS controls. Now, let's try to use a hidden method to achieve this effect. The interface is displayed on one hand, actually, the Browse click event is called to change the style.

As a function, it simulates the click of a "file" type button and takes the value from the "file" type input box, at the same time, make the "file" type input box as implicit, which is what you want:

<Script language = 'javascript '>
Function AA (){
Document. All. t1.click ();
Document. All. t2.value = Document. All. t1.value
}
</SCRIPT>

Place the following on the pageCode:

<Input id = 'T1 'Type = 'file' style = "display: none"> <p>
<Input type = text size = 25 name = t2 style = "height: 18px">
<Input type = button value = browse style = "font-size: 12px; Height: 19; Background: # FFFF00" onclick = "Blur (); AA ()">

Run code

<textarea class="code_run" rows="10" cols="60"><Script language = 'javascript '> <br/> function AA () {<br/> document. all. t1.click (); <br/> document. all. t2.value = document. all. t1.value <br/>}< br/> </SCRIPT> <br/> <input id = 't1' type = 'file' style = "display: none "> <p> <br/> <input type = text size = 25 name = t2 style =" height: 18px "> <br/> <input type = button value = browse style =" font-size: 12px; Height: 19; Background: # FFFF00 "onclick =" Blur (); AA () "></textarea>
[Ctrl + A select all tips: you can modify some code and then press run]