CSS upload control beautification

Source: Internet
Author: User

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



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.