سلام دوستان
من میخوام یه کد بنویسم واسه انتخاب زبان که اینطوری نوشتم
کد HTML:
<nav>
<select>
<option>انتخاب زبان</option>
<option value="turk" class="flag">ترکی</option>
<option value="persian" class="flag">فارسی</option>
<option value="english" class="flag">انگلیسی</option>
</select>
</nav
یه منوی کشویی که توش سه زبان ترکی فارسی انگلیسی هست
خب خواستم برای هر زبان پرچم کشورشو بزارم
اول اومدم داخل همین option ها از تگ img استفاده کنم که برنامه گفت بهتره استفاده نشه
اومدم توی css بنویسیم که البته نوشتم ولی مشکلاتی داره
اول اینکه من کدشو اینطوری نوشتم
nav select option.flag{
background-size:30px 20px;
padding-bottom:5px;
}
select option[value=turk]{
background:url(img/ico/turk.png) no-repeat;
}
select option[value=persian] {
background: url(img/ico/per.png) no-repeat;
}
select option[value=english]{
background:url(img/ico/eng.png) no-repeat;
}
این کد جواب میده ولی آیا راه بهتری نیست؟ چون فرض بکنین 50 تا زبان بود باید 50تا از اینا بنویسم؟ اینطوری کدنویسی زیاد میشه بنظرم
بعدش اینکه وقتی زبان مثلا ترکی انتخاب میکنم پرچشم نمیفته فقط اسم زبان میفته چکار کنم هم اسم هم پرچم بیفته
اینم کد آنلاینش
http://jsfiddle.net/siros/rptkx9sp/