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: donamkhanh.com/lab/css/dropdrown_country