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