文件选择框。

 1  <! DOCTYPE html >
 2  < html >
 3      < head >
 4          < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
 5          < title >表单文件选择框样式 </ title >
 6          < style  type ="text/css" > body{ font-family: Arial,Verdana,sans-serif;  margin: 100px;} </ style >
 7      < script  id ="jquery_172"  type ="text/javascript"  class ="library"  src ="/js/sandbox/jquery/jquery-1.7.2.min.js" ></ script >
 8      </ head >
 9      < body >
10         
11  < div  class ="uploader white" >
12  < input  type ="text"  class ="filename"  readonly ="readonly" />
13  < input  type ="button"  name ="file"  class ="button"  value ="Browse..." />
14  < input  type ="file"  size ="30" />
15  </ div >
16 
17  < br />
18 
19  < div  class ="uploader blue" >
20  < input  type ="text"  class ="filename"  readonly ="readonly" />
21  < input  type ="button"  name ="file"  class ="button"  value ="Browse..." />
22  < input  type ="file"  size ="30" />
23  </ div >
24 
25  < br />
26 
27  < div  class ="uploader green" >
28  < input  type ="text"  class ="filename"  readonly ="readonly" />
29  < input  type ="button"  name ="file"  class ="button"  value ="Browse..." />
30  < input  type ="file"  size ="30" />
31  </ div >
32 
33  < br />
34 
35  < div  class ="uploader red" >
36  < input  type ="text"  class ="filename"  readonly ="readonly" />
37  < input  type ="button"  name ="file"  class ="button"  value ="Browse..." />
38  < input  type ="file"  size ="30" />
39  </ div >
40 
41  < br />
42 
43  < div  class ="uploader orange" >
44  < input  type ="text"  class ="filename"  readonly ="readonly" />
45  < input  type ="button"  name ="file"  class ="button"  value ="Browse..." />
46  < input  type ="file"  size ="30" />
47  </ div >
48 
49  < br />
50 
51  < div  class ="uploader black" >
52  < input  type ="text"  class ="filename"  readonly ="readonly" />
53  < input  type ="button"  name ="file"  class ="button"  value ="Browse..." />
54  < input  type ="file"  size ="30" />
55  </ div >
56 
57      </ body >
58  </ html >

1 $( function(){
2     $("input[type=file]").change( function(){$( this).parents(".uploader").find(".filename").val($( this).val());});
3     $("input[type=file]").each( function(){
4      if($( this).val()==""){$( this).parents(".uploader").find(".filename").val("No file selected...");}
5     });
6 });

   1 .uploader{

  2  position: relative;
  3  display: inline-block;
  4  overflow: hidden;
  5  cursor: default;
  6  padding: 0;
  7  margin: 10px 0px;
  8  -moz-box-shadow: 0px 0px 5px #ddd;
  9  -webkit-box-shadow: 0px 0px 5px #ddd;
 10  box-shadow: 0px 0px 5px #ddd;
 11 
 12  -moz-border-radius: 5px;
 13  -webkit-border-radius: 5px;
 14  border-radius: 5px;
 15  }
 16 
 17  .filename{
 18  float: left;
 19  display: inline-block;
 20  outline: 0 none;
 21  height: 32px;
 22  width: 180px;
 23  margin: 0;
 24  padding: 8px 10px;
 25  overflow: hidden;
 26  cursor: default;
 27  border: 1px solid;
 28  border-right: 0;
 29  font: 9pt/100% Arial, Helvetica, sans-serif;  color: #777;
 30  text-shadow: 1px 1px 0px #fff;
 31  text-overflow: ellipsis;
 32  white-space: nowrap;
 33 
 34  -moz-border-radius: 5px 0px 0px 5px;
 35  -webkit-border-radius: 5px 0px 0px 5px;
 36  border-radius: 5px 0px 0px 5px;
 37 
 38  background: #f5f5f5;
 39  background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
 40  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5));
 41  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);
 42  border-color: #ccc;
 43 
 44  -moz-box-shadow: 0px 0px 1px #fff inset;
 45  -webkit-box-shadow: 0px 0px 1px #fff inset;
 46  box-shadow: 0px 0px 1px #fff inset;
 47 
 48  -moz-box-sizing: border-box;
 49  -webkit-box-sizing: border-box;
 50  box-sizing: border-box;
 51  }
 52 
 53  .button{
 54  float: left;
 55  height: 32px;
 56  display: inline-block;
 57  outline: 0 none;
 58  padding: 8px 12px;
 59  margin: 0;
 60  cursor: pointer;
 61  border: 1px solid;
 62  font: bold 9pt/100% Arial, Helvetica, sans-serif;
 63 
 64  -moz-border-radius: 0px 5px 5px 0px;
 65  -webkit-border-radius: 0px 5px 5px 0px;
 66  border-radius: 0px 5px 5px 0px;
 67 
 68  -moz-box-shadow: 0px 0px 1px #fff inset;
 69  -webkit-box-shadow: 0px 0px 1px #fff inset;
 70  box-shadow: 0px 0px 1px #fff inset;
 71  }
 72 
 73 
 74  .uploader input[type=file]{
 75  position: absolute;
 76  top: 0;  right: 0;  bottom: 0;
 77  border: 0;
 78  padding: 0;  margin: 0;
 79  height: 30px;
 80  cursor: pointer;
 81  filter: alpha(opacity=0);
 82  -moz-opacity: 0;
 83  -khtml-opacity:  0;
 84  opacity: 0;
 85  }
 86 
 87  input[type=button]::-moz-focus-inner{ padding: 0;  border: 0 none;  -moz-box-sizing: content-box;}
 88  input[type=button]::-webkit-focus-inner{ padding: 0;  border: 0 none;  -webkit-box-sizing: content-box;}
 89  input[type=text]::-moz-focus-inner{ padding: 0;  border: 0 none;  -moz-box-sizing: content-box;}
 90  input[type=text]::-webkit-focus-inner{ padding: 0;  border: 0 none;  -webkit-box-sizing: content-box;}
 91 
 92  /*  White Color Scheme ------------------------  */
 93 
 94  .white .button{
 95  color: #555;
 96  text-shadow: 1px 1px 0px #fff;
 97  background: #ddd;
 98  background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%);
 99  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd));
100  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0);
101  border-color: #ccc;
102  }
103 
104  .white:hover .button{
105  background: #eee;
106  background: -moz-linear-gradient(top, #dddddd 0%, #eeeeee 100%);
107  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#eeeeee));
108  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0);
109  }
110 
111  /*  Blue Color Scheme ------------------------  */
112 
113  .blue .button{
114  color: #fff;
115  text-shadow: 1px 1px 0px #09365f;
116  background: #064884;
117  background: -moz-linear-gradient(top, #3b75b4 0%, #064884 100%);
118  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b75b4), color-stop(100%,#064884));
119  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b75b4', endColorstr='#064884',GradientType=0);
120  border-color: #09365f;
121  }
122 
123  .blue:hover .button{
124  background: #3b75b4;
125  background: -moz-linear-gradient(top, #064884 0%, #3b75b4 100%);
126  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#064884), color-stop(100%,#3b75b4));
127  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#064884', endColorstr='#3b75b4',GradientType=0);
128  }
129 
130  /*  Green Color Scheme ------------------------  */
131 
132  .green .button{
133  color: #fff;
134  text-shadow: 1px 1px 0px #6b7735;
135  background: #7d8f33;
136  background: -moz-linear-gradient(top, #93aa4c 0%, #7d8f33 100%);
137  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93aa4c), color-stop(100%,#7d8f33));
138  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93aa4c', endColorstr='#7d8f33',GradientType=0);
139  border-color: #6b7735;
140  }
141 
142  .green:hover .button{
143  background: #93aa4c;
144  background: -moz-linear-gradient(top, #7d8f33 0%, #93aa4c 100%);
145  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d8f33), color-stop(100%,#93aa4c));
146  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d8f33', endColorstr='#93aa4c',GradientType=0);
147  }
148 
149  /*  Red Color Scheme ------------------------  */
150 
151  .red .button{
152  color: #fff;
153  text-shadow: 1px 1px 0px #7e0238;
154  background: #90013f;
155  background: -moz-linear-gradient(top, #b42364 0%, #90013f 100%);
156  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b42364), color-stop(100%,#90013f));
157  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b42364', endColorstr='#90013f',GradientType=0);
158  border-color: #7e0238;
159  }
160 
161  .red:hover .button{
162  background: #b42364;
163  background: -moz-linear-gradient(top, #90013f 0%, #b42364 100%);
164  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90013f), color-stop(100%,#b42364));
165  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#90013f', endColorstr='#b42364',GradientType=0);
166  }
167 
168  /*  Orange Color Scheme ------------------------  */
169 
170  .orange .button{
171  color: #fff;
172  text-shadow: 1px 1px 0px #c04501;
173  background: #d54d01;
174  background: -moz-linear-gradient(top, #f86c1f 0%, #d54d01 100%);
175  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f86c1f), color-stop(100%,#d54d01));
176  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f86c1f', endColorstr='#d54d01',GradientType=0);
177  border-color: #c04501;
178  }
179 
180  .orange:hover .button{
181  background: #f86c1f;
182  background: -moz-linear-gradient(top, #d54d01 0%, #f86c1f 100%);
183  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d54d01), color-stop(100%,#f86c1f));
184  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d54d01', endColorstr='#f86c1f',GradientType=0);
185  }
186 
187  /*  Black Color Scheme ------------------------  */
188 
189  .black .button{
190  color: #fff;
191  text-shadow: 1px 1px 0px #111111;
192  background: #222222;
193  background: -moz-linear-gradient(top, #444444 0%, #222222 100%);
194  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#222222));
195  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222',GradientType=0);
196  border-color: #111111;
197  }
198 
199  .black:hover .button{
200  background: #444444;
201  background: -moz-linear-gradient(top, #222222 0%, #444444 100%);
202  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#444444));
203  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#444444',GradientType=0);
204  }

 

 转自 ： http://runjs.cn/detail/lmj02az5

转载于:https://www.cnblogs.com/XiaoGer/p/3807609.html