It is estimated that many people have no alternative to the ugly style of the file domain, which is unacceptable for a perfect web system. Gmail add-on added in IE browser to achieve the style customization, let everyone excited a good one this, he used the file domain click () method, but the client's security restrictions are very harsh, must be combined with an IFRAME to achieve, the code is more complicated lock. I'm using the transparent overlay method, which puts the file field on top of the hit target and makes it transparent, so that the user sees the custom hot zone and clicks on the browse button, without violating any security mechanisms. In the same way, Firefox is supported by this approach.
<style> *{font-size:12px;cursor:default} hand{cursor:hand;cursor:pointer} </style> <body> <fo RM name=fm1> <div id=bxattlist> <div id=bxatt onmouseover= "$ (' bxAtt1 '). style.textdecoration= ' Underline '" Onmouseout= "$ (' bxAtt1 '). style.textdecoration= '" style=float:left;width:60> <span id=bxatt1 Add Attachment >@ span> <span id=bxatt2 onmouseover=this.scrollleft=100 style=position:absolute;width:60;overflow:hidden;filt Er:alpha (opacity=0);-moz-opacity:0></span> </div> </div> </form> </body> <SCR ipt> file_create () function File_create () {$ ("bxAtt2"). Innerhtml= "<input onchange=file_change (This) hidefocus Type=file name=file1 size=1 class=hand> "} function File_change (tx) {var sname,o sname=tx.value.replace (/\ \/g, "/"). Replace (/(. *\/) (. *)/, "$") o=document.createelement ("nobr") o.style.csstext= "Float:left;margin-right:6"; padding-top:3;color:darkgReen "o.innerhtml="-"+sname+" <font onclick=$ (' bxattlist '). RemoveChild (This.parentnode); File_repos () Class=hand Style=color:red;font-weight:bold> "+unescape (" x ") +" </font> "tx.style.display=" None "O.appendchild (TX) $ ("Bxattlist"). InsertBefore (o,$ ("Bxatt")) File_repos () File_create () ()} function File_repos () {$ ("Bxatt List "). AppendChild ($ (" Bxatt ")} function $ (obj) {return typeof (obj) = =" Object "? Obj:document.getElementById (obj)} </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
