Tạo một Country list (Drop down menu) kèm ảnh quốc kỳ

Published
by
Đỗ Nam Khánh
on 18/09/2008
in CSS
.

Chỉ đơn giản dùng CSS dạng như sau:

1

option#AF { background:url(images/flags/vn.png) no-repeat; padding-left:20px; }

Cái “khó” là phải:
- Có đủ ảnh các quốc gia trên thế giới
- File css cũng phải có từng đó định nghĩa option tương ứng

Để download bộ icon ảnh cờ các nước bạn có thể vào http://www.famfamfam.com/lab/icons/flags để tải, icon khá đẹp :)

Còn đây là đoạn CSS tôi đã tạo sẵn, nếu bạn có nhu cầu dùng chỉ việc copy & paste đoạn định nghĩa sau vào file css của mình:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268

/* Country list option style */
option#AF { background:url(images/flags/af.png) no-repeat; padding-left:15px; }
option#AX { background:url(images/flags/ax.png) no-repeat; padding-left:15px; }
option#AL { background:url(images/flags/al.png) no-repeat; padding-left:15px; }
option#DZ { background:url(images/flags/dz.png) no-repeat; padding-left:15px; }
option#AS { background:url(images/flags/as.png) no-repeat; padding-left:15px; }
option#AD { background:url(images/flags/ad.png) no-repeat; padding-left:15px; }
option#AO { background:url(images/flags/ao.png) no-repeat; padding-left:15px; }
option#AI { background:url(images/flags/ai.png) no-repeat; padding-left:15px; }
option#AQ { background:url(images/flags/aq.png) no-repeat; padding-left:15px; }
option#AG { background:url(images/flags/ag.png) no-repeat; padding-left:15px; }
option#AR { background:url(images/flags/ar.png) no-repeat; padding-left:15px; }
option#AM { background:url(images/flags/am.png) no-repeat; padding-left:15px; }
option#AW { background:url(images/flags/aw.png) no-repeat; padding-left:15px; }
option#AU { background:url(images/flags/au.png) no-repeat; padding-left:15px; }
option#AT { background:url(images/flags/at.png) no-repeat; padding-left:15px; }
option#AZ { background:url(images/flags/az.png) no-repeat; padding-left:15px; }
option#BS { background:url(images/flags/bs.png) no-repeat; padding-left:15px; }
option#BH { background:url(images/flags/bh.png) no-repeat; padding-left:15px; }
option#BD { background:url(images/flags/bd.png) no-repeat; padding-left:15px; }
option#BB { background:url(images/flags/bb.png) no-repeat; padding-left:15px; }
option#BY { background:url(images/flags/by.png) no-repeat; padding-left:15px; }
option#BE { background:url(images/flags/be.png) no-repeat; padding-left:15px; }
option#BZ { background:url(images/flags/bz.png) no-repeat; padding-left:15px; }
option#BJ { background:url(images/flags/bj.png) no-repeat; padding-left:15px; }
option#BM { background:url(images/flags/bm.png) no-repeat; padding-left:15px; }
option#BT { background:url(images/flags/bt.png) no-repeat; padding-left:15px; }
option#BO { background:url(images/flags/bo.png) no-repeat; padding-left:15px; }
option#BA { background:url(images/flags/ba.png) no-repeat; padding-left:15px; }
option#BW { background:url(images/flags/bw.png) no-repeat; padding-left:15px; }
option#BV { background:url(images/flags/bv.png) no-repeat; padding-left:15px; }
option#BR { background:url(images/flags/br.png) no-repeat; padding-left:15px; }
option#BQ { background:url(images/flags/bq.png) no-repeat; padding-left:15px; }
option#IO { background:url(images/flags/io.png) no-repeat; padding-left:15px; }
option#VG { background:url(images/flags/vg.png) no-repeat; padding-left:15px; }
option#BN { background:url(images/flags/bn.png) no-repeat; padding-left:15px; }
option#BG { background:url(images/flags/bg.png) no-repeat; padding-left:15px; }
option#BF { background:url(images/flags/bf.png) no-repeat; padding-left:15px; }
option#BI { background:url(images/flags/bi.png) no-repeat; padding-left:15px; }
option#KH { background:url(images/flags/kh.png) no-repeat; padding-left:15px; }
option#CM { background:url(images/flags/cm.png) no-repeat; padding-left:15px; }
option#CA { background:url(images/flags/ca.png) no-repeat; padding-left:15px; }
option#CT { background:url(images/flags/ct.png) no-repeat; padding-left:15px; }
option#CV { background:url(images/flags/cv.png) no-repeat; padding-left:15px; }
option#KY { background:url(images/flags/ky.png) no-repeat; padding-left:15px; }
option#CF { background:url(images/flags/cf.png) no-repeat; padding-left:15px; }
option#TD { background:url(images/flags/td.png) no-repeat; padding-left:15px; }
option#CL { background:url(images/flags/cl.png) no-repeat; padding-left:15px; }
option#CN { background:url(images/flags/cn.png) no-repeat; padding-left:15px; }
option#CX { background:url(images/flags/cx.png) no-repeat; padding-left:15px; }
option#CC { background:url(images/flags/cc.png) no-repeat; padding-left:15px; }
option#CO { background:url(images/flags/co.png) no-repeat; padding-left:15px; }
option#KM { background:url(images/flags/km.png) no-repeat; padding-left:15px; }
option#CG { background:url(images/flags/cg.png) no-repeat; padding-left:15px; }
option#CD { background:url(images/flags/cd.png) no-repeat; padding-left:15px; }
option#CK { background:url(images/flags/ck.png) no-repeat; padding-left:15px; }
option#CR { background:url(images/flags/cr.png) no-repeat; padding-left:15px; }
option#HR { background:url(images/flags/hr.png) no-repeat; padding-left:15px; }
option#CU { background:url(images/flags/cu.png) no-repeat; padding-left:15px; }
option#CY { background:url(images/flags/cy.png) no-repeat; padding-left:15px; }
option#CZ { background:url(images/flags/cz.png) no-repeat; padding-left:15px; }
option#DK { background:url(images/flags/dk.png) no-repeat; padding-left:15px; }
option#DJ { background:url(images/flags/dj.png) no-repeat; padding-left:15px; }
option#DM { background:url(images/flags/dm.png) no-repeat; padding-left:15px; }
option#DO { background:url(images/flags/do.png) no-repeat; padding-left:15px; }
option#NQ { background:url(images/flags/nq.png) no-repeat; padding-left:15px; }
option#DD { background:url(images/flags/dd.png) no-repeat; padding-left:15px; }
option#TL { background:url(images/flags/tl.png) no-repeat; padding-left:15px; }
option#EC { background:url(images/flags/ec.png) no-repeat; padding-left:15px; }
option#EG { background:url(images/flags/eg.png) no-repeat; padding-left:15px; }
option#SV { background:url(images/flags/sv.png) no-repeat; padding-left:15px; }
option#GQ { background:url(images/flags/gq.png) no-repeat; padding-left:15px; }
option#ER { background:url(images/flags/er.png) no-repeat; padding-left:15px; }
option#EE { background:url(images/flags/ee.png) no-repeat; padding-left:15px; }
option#ET { background:url(images/flags/et.png) no-repeat; padding-left:15px; }
option#QU { background:url(images/flags/qu.png) no-repeat; padding-left:15px; }
option#FK { background:url(images/flags/fk.png) no-repeat; padding-left:15px; }
option#FO { background:url(images/flags/fo.png) no-repeat; padding-left:15px; }
option#FJ { background:url(images/flags/fj.png) no-repeat; padding-left:15px; }
option#FI { background:url(images/flags/fi.png) no-repeat; padding-left:15px; }
option#FR { background:url(images/flags/fr.png) no-repeat; padding-left:15px; }
option#GF { background:url(images/flags/gf.png) no-repeat; padding-left:15px; }
option#PF { background:url(images/flags/pf.png) no-repeat; padding-left:15px; }
option#FQ { background:url(images/flags/fq.png) no-repeat; padding-left:15px; }
option#TF { background:url(images/flags/tf.png) no-repeat; padding-left:15px; }
option#GA { background:url(images/flags/ga.png) no-repeat; padding-left:15px; }
option#GM { background:url(images/flags/gm.png) no-repeat; padding-left:15px; }
option#GE { background:url(images/flags/ge.png) no-repeat; padding-left:15px; }
option#DE { background:url(images/flags/de.png) no-repeat; padding-left:15px; }
option#GH { background:url(images/flags/gh.png) no-repeat; padding-left:15px; }
option#GI { background:url(images/flags/gi.png) no-repeat; padding-left:15px; }
option#GR { background:url(images/flags/gr.png) no-repeat; padding-left:15px; }
option#GL { background:url(images/flags/gl.png) no-repeat; padding-left:15px; }
option#GD { background:url(images/flags/gd.png) no-repeat; padding-left:15px; }
option#GP { background:url(images/flags/gp.png) no-repeat; padding-left:15px; }
option#GU { background:url(images/flags/gu.png) no-repeat; padding-left:15px; }
option#GT { background:url(images/flags/gt.png) no-repeat; padding-left:15px; }
option#GG { background:url(images/flags/gg.png) no-repeat; padding-left:15px; }
option#GN { background:url(images/flags/gn.png) no-repeat; padding-left:15px; }
option#GW { background:url(images/flags/gw.png) no-repeat; padding-left:15px; }
option#GY { background:url(images/flags/gy.png) no-repeat; padding-left:15px; }
option#HT { background:url(images/flags/ht.png) no-repeat; padding-left:15px; }
option#HM { background:url(images/flags/hm.png) no-repeat; padding-left:15px; }
option#HN { background:url(images/flags/hn.png) no-repeat; padding-left:15px; }
option#HK { background:url(images/flags/hk.png) no-repeat; padding-left:15px; }
option#HU { background:url(images/flags/hu.png) no-repeat; padding-left:15px; }
option#IS { background:url(images/flags/is.png) no-repeat; padding-left:15px; }
option#IN { background:url(images/flags/in.png) no-repeat; padding-left:15px; }
option#ID { background:url(images/flags/id.png) no-repeat; padding-left:15px; }
option#IR { background:url(images/flags/ir.png) no-repeat; padding-left:15px; }
option#IQ { background:url(images/flags/iq.png) no-repeat; padding-left:15px; }
option#IE { background:url(images/flags/ie.png) no-repeat; padding-left:15px; }
option#IM { background:url(images/flags/im.png) no-repeat; padding-left:15px; }
option#IL { background:url(images/flags/il.png) no-repeat; padding-left:15px; }
option#IT { background:url(images/flags/it.png) no-repeat; padding-left:15px; }
option#CI { background:url(images/flags/ci.png) no-repeat; padding-left:15px; }
option#JM { background:url(images/flags/jm.png) no-repeat; padding-left:15px; }
option#JP { background:url(images/flags/jp.png) no-repeat; padding-left:15px; }
option#JE { background:url(images/flags/je.png) no-repeat; padding-left:15px; }
option#JT { background:url(images/flags/jt.png) no-repeat; padding-left:15px; }
option#JO { background:url(images/flags/jo.png) no-repeat; padding-left:15px; }
option#KZ { background:url(images/flags/kz.png) no-repeat; padding-left:15px; }
option#KE { background:url(images/flags/ke.png) no-repeat; padding-left:15px; }
option#KI { background:url(images/flags/ki.png) no-repeat; padding-left:15px; }
option#KW { background:url(images/flags/kw.png) no-repeat; padding-left:15px; }
option#KG { background:url(images/flags/kg.png) no-repeat; padding-left:15px; }
option#LA { background:url(images/flags/la.png) no-repeat; padding-left:15px; }
option#LV { background:url(images/flags/lv.png) no-repeat; padding-left:15px; }
option#LB { background:url(images/flags/lb.png) no-repeat; padding-left:15px; }
option#LS { background:url(images/flags/ls.png) no-repeat; padding-left:15px; }
option#LR { background:url(images/flags/lr.png) no-repeat; padding-left:15px; }
option#LY { background:url(images/flags/ly.png) no-repeat; padding-left:15px; }
option#LI { background:url(images/flags/li.png) no-repeat; padding-left:15px; }
option#LT { background:url(images/flags/lt.png) no-repeat; padding-left:15px; }
option#LU { background:url(images/flags/lu.png) no-repeat; padding-left:15px; }
option#MO { background:url(images/flags/mo.png) no-repeat; padding-left:15px; }
option#MK { background:url(images/flags/mk.png) no-repeat; padding-left:15px; }
option#MG { background:url(images/flags/mg.png) no-repeat; padding-left:15px; }
option#MW { background:url(images/flags/mw.png) no-repeat; padding-left:15px; }
option#MY { background:url(images/flags/my.png) no-repeat; padding-left:15px; }
option#MV { background:url(images/flags/mv.png) no-repeat; padding-left:15px; }
option#ML { background:url(images/flags/ml.png) no-repeat; padding-left:15px; }
option#MT { background:url(images/flags/mt.png) no-repeat; padding-left:15px; }
option#MH { background:url(images/flags/mh.png) no-repeat; padding-left:15px; }
option#MQ { background:url(images/flags/mq.png) no-repeat; padding-left:15px; }
option#MR { background:url(images/flags/mr.png) no-repeat; padding-left:15px; }
option#MU { background:url(images/flags/mu.png) no-repeat; padding-left:15px; }
option#YT { background:url(images/flags/yt.png) no-repeat; padding-left:15px; }
option#FX { background:url(images/flags/fx.png) no-repeat; padding-left:15px; }
option#MX { background:url(images/flags/mx.png) no-repeat; padding-left:15px; }
option#FM { background:url(images/flags/fm.png) no-repeat; padding-left:15px; }
option#MI { background:url(images/flags/mi.png) no-repeat; padding-left:15px; }
option#MD { background:url(images/flags/md.png) no-repeat; padding-left:15px; }
option#MC { background:url(images/flags/mc.png) no-repeat; padding-left:15px; }
option#MN { background:url(images/flags/mn.png) no-repeat; padding-left:15px; }
option#ME { background:url(images/flags/me.png) no-repeat; padding-left:15px; }
option#MS { background:url(images/flags/ms.png) no-repeat; padding-left:15px; }
option#MA { background:url(images/flags/ma.png) no-repeat; padding-left:15px; }
option#MZ { background:url(images/flags/mz.png) no-repeat; padding-left:15px; }
option#MM { background:url(images/flags/mm.png) no-repeat; padding-left:15px; }
option#NA { background:url(images/flags/na.png) no-repeat; padding-left:15px; }
option#NR { background:url(images/flags/nr.png) no-repeat; padding-left:15px; }
option#NP { background:url(images/flags/np.png) no-repeat; padding-left:15px; }
option#NL { background:url(images/flags/nl.png) no-repeat; padding-left:15px; }
option#AN { background:url(images/flags/an.png) no-repeat; padding-left:15px; }
option#NT { background:url(images/flags/nt.png) no-repeat; padding-left:15px; }
option#NC { background:url(images/flags/nc.png) no-repeat; padding-left:15px; }
option#NZ { background:url(images/flags/nz.png) no-repeat; padding-left:15px; }
option#NI { background:url(images/flags/ni.png) no-repeat; padding-left:15px; }
option#NE { background:url(images/flags/ne.png) no-repeat; padding-left:15px; }
option#NG { background:url(images/flags/ng.png) no-repeat; padding-left:15px; }
option#NU { background:url(images/flags/nu.png) no-repeat; padding-left:15px; }
option#NF { background:url(images/flags/nf.png) no-repeat; padding-left:15px; }
option#KP { background:url(images/flags/kp.png) no-repeat; padding-left:15px; }
option#VD { background:url(images/flags/vd.png) no-repeat; padding-left:15px; }
option#MP { background:url(images/flags/mp.png) no-repeat; padding-left:15px; }
option#NO { background:url(images/flags/no.png) no-repeat; padding-left:15px; }
option#OM { background:url(images/flags/om.png) no-repeat; padding-left:15px; }
option#QO { background:url(images/flags/qo.png) no-repeat; padding-left:15px; }
option#PC { background:url(images/flags/pc.png) no-repeat; padding-left:15px; }
option#PK { background:url(images/flags/pk.png) no-repeat; padding-left:15px; }
option#PW { background:url(images/flags/pw.png) no-repeat; padding-left:15px; }
option#PS { background:url(images/flags/ps.png) no-repeat; padding-left:15px; }
option#PA { background:url(images/flags/pa.png