CSS upload control beautification

In general, the upload control does not use flash or the input [type = file] element, but flash is not saved on the iPad, the input [type = file] does not look like it in various browsers, so we need to use CSS to handle it. I heard that WebKit can use-WebKit-appearance: none; to clear the default style, you can do whatever you want. But the cannon fodder of tianchao (some companies like to call us front-end siege fighters, isn't it the cannon fodder? Every time we change the design, it's just a dead-end task ), we can't afford such advanced stuff. We need to be compatible with IE6. Finally, find the solution for the big data in the group.

The principle is roughly as follows. Since the original input [type = file] element is ugly, let it disappear. The disappearance here is to make it transparent and package a layer outside. The parent element is relatively positioned. Then add a div element to the bottom. It is a brother of the input [type = file] element, but it is absolutely positioned to the left alignment. The level is 1, the input [type = file] element is an absolute right-aligned position with a level of 3. Add an input [type = text] element to the DIV to pretend to be input [type = file]. We can beautify it. Now it is time to simulate the Browse button of the original upload control. Let that DIV also become a positioning element, and put a div or IMG in it. This element is called a pseudo upload button. The pseudo upload button is absolutely positioned to the right, with a level of 2. When you click it, it is actually the transparent input [type = file] element in the point. The last part is the interaction part. After the file is selected by default, the path of this file will appear in the input file. Let's create an onchange event, assign the value of input [type = file] to input [type = text.

Below is the HTML section

<Div id = "file_wrapper"> <Div id = "file_faker"> <input/> <Div id = "file_btn"> overview </div> <SPAN class = "CTR "> </span> <SPAN class =" CBR "> </span> <! -- Hide real uploads --> </div> <input type = "file" id = "file_uploader"/> </div>
 

CSS Section

# File_wrapper {position: relative; width: 200px; Height: 20px; display: inline-block;} # file_faker {position: absolute; top: 0px; left: 0px; z-index: 1;}/* This is the button you see */# file_faker input {width: 200px; Height: 18px ;} /* here is the button */# file_btn {position: absolute; top: 0; Right: 0; width: 60px; Height: 20px; line-Height: 20px; text-align: center; Background: #878787; color: # FFF; Z-index: 2 ;}# file_uploader {position: relative; text-align: Right;-moz-opacity: 0; filter: alpha (opacity: 0); opacity: 0; Z-index: 3;}/* simulate rounded corner */. ctr ,. CBR {position: absolute; Background: # FFF; width: 1px; Height: 1px; display: block; Z-index: 4 ;}. CTR {top: 0px; Right: 0px ;}. CBR {bottom: 0px; Right: 0px ;}
 

JS Interaction

 window. onload = function () {var $ = function (ID) {return "string" = typeof ID? Document. getelementbyid (ID): Id ;}; $ ("file_uploader "). onchange = function () {$ ("text_box "). value = This. value ;}}

Overview