HTML, file upload using the <input type= "file" > Style customization

Source: Internet
Author: User

Web page, when you need to upload a file, the basic use of <input type= "file" > element, its default style:

Under Chrome:

IE under:

Either way, the style is relatively simple, and the style of many web pages is not very coordinated.

According to the needs of users, design style, change the display style of the occasion is more.

If you want to do a bootstrap-style upload button as below, how to do it.

Basic elements needed to build the upload button

        <class= "">            <span> upload  </span>            <type= "File" >        </ span >

Effect (Chrome):

Now see the two lines shown.

The periphery is not replaced by Div, because in the Ie7-browser, as long as it is not set to inline, its width will be stretched to reach the width. If it is set to inline, the width of the element cannot be adjusted, so the problem can be solved by using span and then setting it to Inline-block.

Add a style to turn two rows into one line

        <class= "Fileinput-button"">            <span  > upload </span>            <type  = "file">        </span>

Css:

        {            position: relative;             display: inline-block;        }         . Fileinput-button input{            position: absolute;             right: 0px;             top: 0px;        }

Effect:

The default is not a light blue border, only the mouse to click after the display, which is shown here to see clearly.

By setting the perimeter span to display:relative, the input is set to Display:absolute, leaving them all out of the flow of the document.

By limiting input to an absolute location in a perimeter span, the two lines appear to be displayed in a row.

In fact, this is already overflow, the real width is "upload" the width of the text, modify the Fileinput-button style to increase Overflow:hidden

        {            position: relative;             display: inline-block;             Overflow: hidden;        }

Effect:

Very interesting, you can see the upper right side of the blue border, in fact, the left and the bottom of the overflow part to hide.

This time with the mouse to click "Upload" two words is actually point on input, can display the "Open" dialog box, because the display level of input than "upload" closer to the user.

Note that right in the input location, why not left-positioning.

When we change to left.

Effect (Chrome):

Effect (IE):

The Select button in the INPUT element under Chrome is exposed, but it doesn't matter, it can be transparently removed by a transparent way behind it.

However, under IE, the input box will be exposed, the key is to move the mouse over the input box, the pointer will become the input state, this is very impossible to deal with.

The way to move the input box to the left by positioning the right, you can avoid the situation where the mouse pointer becomes the input state under IE.

Transparent INPUT Element

Css:

. Fileinput-button{position:relative;Display:Inline-block;Overflow:Hidden; }. Fileinput-button input{position:Absolute; Left:0px;Top:0px; opacity: 0; -ms-filter: ' alpha (opacity=0) ';}

Effect:

Input is completely missing and clicking "Upload" still works.

can support ie8+.

Introduce bootstrap, and add button styles

Add external CSS and JS references to the head.

    <Linkrel= "stylesheet"href= "Bootstrap/bootstrap.css">    <Linkrel= "stylesheet"href= "Bootstrap/bootstrap-theme.css">    <Scriptsrc= "Bootstrap/jquery-1.10.2.js"></Script>    <Scriptsrc= "Bootstrap/bootstrap.js"></Script>

Adds a button style.

        <class= "btn btn-success fileinput-button">            <  Span> upload </span>              <  Type= "file">        </span>

Effect:

Resolving size issues

If you add width:100px to the Fileinput-button style, and the perimeter span is set to 100px wide, you will notice that the bottom of the click is unresponsive because input is the default size and cannot cover the lower part.

You can fix the overlay problem by setting a large font size for input, which is set to 200px.

       . Fileinput-button input{            position:absolute;             right: 0px;             top:0px;             opacity: 0;             -ms-filter: ' alpha (opacity=0) ';              font-size: 200px;        }

This will solve the coverage problem.

Complete.

Reference : Jquery-file-upload

If you want to be compatible with ie7-, you can refer to the jquery-file-upload notation.

Code:

<!DOCTYPE HTML><HTML><Head>    <title></title>    <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8">    <Linkrel= "stylesheet"href= "Bootstrap/bootstrap.css">    <Linkrel= "stylesheet"href= "Bootstrap/bootstrap-theme.css">    <Scriptsrc= "Bootstrap/jquery-1.10.2.js"></Script>    <Scriptsrc= "Bootstrap/bootstrap.js"></Script>    <style>. Fileinput-button{position:relative;Display:Inline-block;Overflow:Hidden;        }. Fileinput-button input{position:Absolute; Right:0px;Top: 0px;Opacity:0;-ms-filter:' alpha (opacity=0) ';font-size:200px;        }    </style></Head><Bodystyle= "padding:10px">    <DivAlign= "Center">        <spanclass= "btn btn-success Fileinput-button">            <span>Upload</span>            <inputtype= "File">        </span>    </Div></Body></HTML>

HTML, file upload using the <input type= "file" > Style customization

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.