文件選擇框。
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 >
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 $("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{javascript
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 }
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/lmj02az5css
相關文章
- 1. javascript文件夾選擇框
- 2. ABAP 文件選擇框
- 3. Qt:QtFileDialog打開文件選擇對話框選擇文件
- 4. WPF 選擇文件選擇文件夾
- 5. JavaFX控件——FileChooser（文件選擇框）
- 6. 彈出文件夾選擇對話框
- 7. ABAP文件選擇框函數
- 8. 文件選擇對話框：CFileDialog
- 9. QT文件選擇對話框
- 10. 本地文件夾選擇框
- 更多相關文章...
- • ionic 複選框 - ionic 教程
- • ionic 單選框 - ionic 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. javascript文件夾選擇框
- 2. ABAP 文件選擇框
- 3. Qt:QtFileDialog打開文件選擇對話框選擇文件
- 4. WPF 選擇文件選擇文件夾
- 5. JavaFX控件——FileChooser（文件選擇框）
- 6. 彈出文件夾選擇對話框
- 7. ABAP文件選擇框函數
- 8. 文件選擇對話框：CFileDialog
- 9. QT文件選擇對話框
- 10. 本地文件夾選擇框