CSS custom file Upload button style, compatible with mainstream browser

1. [Code][html] Code

1 <Divclass= "box">2      <inputtype= "text"name= "CopyFile"class= "TextBox" />3      <ahref= "javascript:void (0);"class= "link">Browse</a>4      <inputtype= "File"class= "UploadFile"name= "Upload"5 onchange= "GetFile (this, ' CopyFile ')" />6 </Div>

2. [Code][CSS] Code

1 <styletype= "Text/css">2     * {3 margin:0;4 padding:0;5     }6 Body{7 Font:14px Verdana, Arial, Geneva, Sans-serif;8 Color:#404040;9 background:#fff;Ten     } One img{ A Border-style:None; -     } - . Main{ the width:300px; - Height:60px; - position:Absolute; -  Left:50%; + Top:50%; - Margin-left:-150px; + Margin-top:-30px; A     } at . Box{ - position:relative; - float: Left; -     } - Input.uploadfile{ - position:Absolute; in  Right:0px; - Top:0px; to Opacity:0; + Filter:Alpha (opacity=0); - cursor:Pointer; the width:276px; * Height:36px; $ Overflow:Hidden;Panax Notoginseng     } - Input.textbox{ the float: Left; + padding:5px; A Color:#999; the Height:24px; + Line-height:24px; - Border:1px #ccc Solid; $ width:200px; $ Margin-right:4px; -     } - A.link{ the float: Left; - Display:Inline-block;Wuyi padding:4px 16px; the Color:#fff; - Font:14px "Microsoft Yahei", Verdana, Geneva, Sans-serif; Wu cursor:Pointer; - Background-color:#0099ff; About Line-height:28px; $ text-decoration:None; -     } - </style>

CSS custom file Upload button style, compatible with mainstream browser