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 });
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 }
