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

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

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:

/* 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) no-repeat; padding-left:15px; }
option#PZ { background:url(images/flags/pz.png) no-repeat; padding-left:15px; }
option#PG { background:url(images/flags/pg.png) no-repeat; padding-left:15px; }
option#PY { background:url(images/flags/py.png) no-repeat; padding-left:15px; }
option#YD { background:url(images/flags/yd.png) no-repeat; padding-left:15px; }
option#PE { background:url(images/flags/pe.png) no-repeat; padding-left:15px; }
option#PH { background:url(images/flags/ph.png) no-repeat; padding-left:15px; }
option#PN { background:url(images/flags/pn.png) no-repeat; padding-left:15px; }
option#PL { background:url(images/flags/pl.png) no-repeat; padding-left:15px; }
option#PT { background:url(images/flags/pt.png) no-repeat; padding-left:15px; }
option#PR { background:url(images/flags/pr.png) no-repeat; padding-left:15px; }
option#QA { background:url(images/flags/qa.png) no-repeat; padding-left:15px; }
option#RT { background:url(images/flags/rt.png) no-repeat; padding-left:15px; }
option#RE { background:url(images/flags/re.png) no-repeat; padding-left:15px; }
option#RO { background:url(images/flags/ro.png) no-repeat; padding-left:15px; }
option#RU { background:url(images/flags/ru.png) no-repeat; padding-left:15px; }
option#RW { background:url(images/flags/rw.png) no-repeat; padding-left:15px; }
option#BL { background:url(images/flags/bl.png) no-repeat; padding-left:15px; }
option#SH { background:url(images/flags/sh.png) no-repeat; padding-left:15px; }
option#KN { background:url(images/flags/kn.png) no-repeat; padding-left:15px; }
option#LC { background:url(images/flags/lc.png) no-repeat; padding-left:15px; }
option#MF { background:url(images/flags/mf.png) no-repeat; padding-left:15px; }
option#PM { background:url(images/flags/pm.png) no-repeat; padding-left:15px; }
option#VC { background:url(images/flags/vc.png) no-repeat; padding-left:15px; }
option#WS { background:url(images/flags/ws.png) no-repeat; padding-left:15px; }
option#SM { background:url(images/flags/sm.png) no-repeat; padding-left:15px; }
option#ST { background:url(images/flags/st.png) no-repeat; padding-left:15px; }
option#SA { background:url(images/flags/sa.png) no-repeat; padding-left:15px; }
option#SN { background:url(images/flags/sn.png) no-repeat; padding-left:15px; }
option#RS { background:url(images/flags/rs.png) no-repeat; padding-left:15px; }
option#CS { background:url(images/flags/cs.png) no-repeat; padding-left:15px; }
option#SC { background:url(images/flags/sc.png) no-repeat; padding-left:15px; }
option#SL { background:url(images/flags/sl.png) no-repeat; padding-left:15px; }
option#SG { background:url(images/flags/sg.png) no-repeat; padding-left:15px; }
option#SK { background:url(images/flags/sk.png) no-repeat; padding-left:15px; }
option#SI { background:url(images/flags/si.png) no-repeat; padding-left:15px; }
option#SB { background:url(images/flags/sb.png) no-repeat; padding-left:15px; }
option#SO { background:url(images/flags/so.png) no-repeat; padding-left:15px; }
option#ZA { background:url(images/flags/za.png) no-repeat; padding-left:15px; }
option#GS { background:url(images/flags/gs.png) no-repeat; padding-left:15px; }
option#KR { background:url(images/flags/kr.png) no-repeat; padding-left:15px; }
option#ES { background:url(images/flags/es.png) no-repeat; padding-left:15px; }
option#LK { background:url(images/flags/lk.png) no-repeat; padding-left:15px; }
option#SD { background:url(images/flags/sd.png) no-repeat; padding-left:15px; }
option#SR { background:url(images/flags/sr.png) no-repeat; padding-left:15px; }
option#SJ { background:url(images/flags/sj.png) no-repeat; padding-left:15px; }
option#SZ { background:url(images/flags/sz.png) no-repeat; padding-left:15px; }
option#SE { background:url(images/flags/se.png) no-repeat; padding-left:15px; }
option#CH { background:url(images/flags/ch.png) no-repeat; padding-left:15px; }
option#SY { background:url(images/flags/sy.png) no-repeat; padding-left:15px; }
option#TW { background:url(images/flags/tw.png) no-repeat; padding-left:15px; }
option#TJ { background:url(images/flags/tj.png) no-repeat; padding-left:15px; }
option#TZ { background:url(images/flags/tz.png) no-repeat; padding-left:15px; }
option#TH { background:url(images/flags/th.png) no-repeat; padding-left:15px; }
option#TG { background:url(images/flags/tg.png) no-repeat; padding-left:15px; }
option#TK { background:url(images/flags/tk.png) no-repeat; padding-left:15px; }
option#TO { background:url(images/flags/to.png) no-repeat; padding-left:15px; }
option#TT { background:url(images/flags/tt.png) no-repeat; padding-left:15px; }
option#TN { background:url(images/flags/tn.png) no-repeat; padding-left:15px; }
option#TR { background:url(images/flags/tr.png) no-repeat; padding-left:15px; }
option#TM { background:url(images/flags/tm.png) no-repeat; padding-left:15px; }
option#TC { background:url(images/flags/tc.png) no-repeat; padding-left:15px; }
option#TV { background:url(images/flags/tv.png) no-repeat; padding-left:15px; }
option#PU { background:url(images/flags/pu.png) no-repeat; padding-left:15px; }
option#VI { background:url(images/flags/vi.png) no-repeat; padding-left:15px; }
option#UG { background:url(images/flags/ug.png) no-repeat; padding-left:15px; }
option#UA { background:url(images/flags/ua.png) no-repeat; padding-left:15px; }
option#SU { background:url(images/flags/su.png) no-repeat; padding-left:15px; }
option#AE { background:url(images/flags/ae.png) no-repeat; padding-left:15px; }
option#GB { background:url(images/flags/gb.png) no-repeat; padding-left:15px; }
option#US { background:url(images/flags/us.png) no-repeat; padding-left:15px; }
option#UM { background:url(images/flags/um.png) no-repeat; padding-left:15px; }
option#ZZ { background:url(images/flags/zz.png) no-repeat; padding-left:15px; }
option#UY { background:url(images/flags/uy.png) no-repeat; padding-left:15px; }
option#UZ { background:url(images/flags/uz.png) no-repeat; padding-left:15px; }
option#VU { background:url(images/flags/vu.png) no-repeat; padding-left:15px; }
option#VA { background:url(images/flags/va.png) no-repeat; padding-left:15px; }
option#VE { background:url(images/flags/ve.png) no-repeat; padding-left:15px; }
option#VN { background:url(images/flags/vn.png) no-repeat; padding-left:15px; }
option#WK { background:url(images/flags/wk.png) no-repeat; padding-left:15px; }
option#WF { background:url(images/flags/wf.png) no-repeat; padding-left:15px; }
option#EH { background:url(images/flags/eh.png) no-repeat; padding-left:15px; }
option#YE { background:url(images/flags/ye.png) no-repeat; padding-left:15px; }
option#ZM { background:url(images/flags/zm.png) no-repeat; padding-left:15px; }
option#ZW { background:url(images/flags/zw.png) no-repeat; padding-left:15px; }

HTML của bạn sẽ tương tự như sau:

   Viet Nam
   

Lưu ý:
– Chưa “hack” với IE6
– Nhiều nước chưa có ảnh quốc kỳ tương ứng, nếu bạn có bộ ảnh nào đầy đủ muốn chia sẻ thì comment tại đây hoặc email cho mình để mình cập nhật lại.

Demo: http://donamkhanh.com/lab/css/dropdrown_country