Input (File) Browse button beautification

References:

Http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html

 

My:

<Style>
. Sh {
Position: relative;
Width: 350px;
Float: left;
}

. Sh input. text_style {
Position: relative;
Width: 320px;
Padding-Right: 30px;
Z-index: 1001;
}

. Sh span {
Position: absolute;
Z-index: 1002;
Right: 10px;
Top: 5px;
Cursor: pointer;
Background: URL (../images/sh.png) No-Repeat;
Display: inline-block;
Width: 20px;
Height: 20px;
Overflow: hidden;
}

. File_browser. file_field {
Position: absolute;
Right: 0;
Top: 0;
Font-size: 100px;
Opacity: 0;
Filter: alpha (opacity = 0 );
}

. File_ OK {
Position: relative;
Border: none;
Padding: 0 20px;
Height: 32px;
Margin-Right: 10px;
Text-align: center;
Background: # ed3939;
Line-Height: 32px;
Color: # FFF;
Display: inline-block;
Cursor: pointer;
Font-size: 16px;
-WebKit-transition: All. 5 s transition;
-MS-transition: All. 5 s transition;
-O-transition: All. 5 s transition;
-Moz-transition: All. 5 s transition;
Transition: All. 5 s unknown;
}

. File_ OK: hover {
Opacity: 0.8;
Filter: alpha (opacity = 80 );
Float: left;

}

</Style>

<! -- You can customize the width of file_browser and text_field to set a difference of 30 PX. -->

<Div class = "Sh file_browser" style = "width: 600px">
<Input style = "width: 570px" Placeholder = "click the query button on the right to import the file" type = "text" name = ""
Class = "text_field"/> <span> <input class = "file_field" onchange = "$ ('. text_field'). Val ($ (this). Val ())"
Name = "" id = "" type = "file"/> </span>
</Div>

<! -- OK buttons can be independent. -->

<SPAN class = "file_ OK"> OK </span>

 

 

Final effect:

Input (File) Browse button beautification