Compatible with input type = file beautification of various browsers

Style:

The code is as follows:

Copy code

. FileInput {width: 102px; height: 34px; background: url (http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png); overflow: hidden; position: relative ;} . Upfile {position: absolute; top:-100px ;} . UpFileBtn {width: 102px; height: 34px; opacity: 0; filter: alpha (opacity = 0); cursor: pointer ;} HTML: <Div class = "fileInput left"> <Input type = "file" name = "upfile" id = "upfile" class = "upfile" onchange = "document. getElementById ('upfileresresult '). innerHTML = this. value "/> <Input class = "upFileBtn" type = "button" value = "upload image" onclick = "document. getElementById ('upfile'). click ()"/> </Div> <Span class = "tip left" id = "upfileResult"> Image size "> the size of an image cannot exceed 2 MB but is 90*90. jpg, png, and bmp formats are supported. </Span>

I found some file Upload buttons on the Internet, which are not very good and incompatible with Firefox.

The following is my method (which is very simple and works well in various browsers ):

The code is as follows:

Copy code

HTML: <Input type = "file" name = "file_0_ture" size = "20" onchange = "document. getElementById ('File _ 0 '). value = this. value "class =" text opacity "> <input name =" file_0 "id =" file_0 "value =" "class =" text "> <input type =" button "value = "Browse... "class =" file_btn "> CSS: . Opacity {opacity: 0; FILTER: Alpha (Opacity = 0 );} . Text {border: 1px solid # c0c1b3 ;} . Text. opacity {position: absolute; height: 20px ;} . Text. file {width: 129px! Important; width: 135px; z-index: 100 ;} . Text. file_btn {height: 19px; margin: 0 0-1px 0; width: auto! Important; width: 60px; background: # f0f0f0; padding :;}