文件选择框。

 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

posted @ 2014-06-25 10:53  少爵  阅读(304)  评论(0编辑  收藏  举报