0

Images are not display in drop down in Chrome or Internet Explorer browser, but in Firefox browser they are displayed. This is my css code:

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}
select#countries option[value="AF"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/af.png);
}
select#countries option[value="AL"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/al.png);
}
select#countries option[value="DZ"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/dz.png);
}
select#countries option[value="AS"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/as.png);
}
select#countries option[value="AD"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/ad.png);
}

**This is my HTML code**
<select name="countries" id="countries" class="icon-menu">
<option value="">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
</select>
C. Patel
  • 1
  • 3
  • If you have option to use jQuery plugin you will find this helpful - https://github.com/jackocnr/intl-tel-input – Pravin W Nov 24 '15 at 09:47
  • Thanks.. But Can you please run above snippet code on chrome browser drop down flags are not displayed... – C. Patel Nov 24 '15 at 10:05
  • 1
    Possible duplicate of [CSS+Select Dropdown Option](http://stackoverflow.com/questions/5887133/cssselect-dropdown-option) – feeela Nov 24 '15 at 10:10
  • as of now there is no much support for styling of – Pravin W Nov 24 '15 at 10:16
  • from google, check this http://www.marghoobsuleman.com/countries-dropdown-flags I don't know about cross-browser issues – Mi-Creativity Nov 24 '15 at 10:17

2 Answers2

0

You can't style <option> tags in IE <9 and Chromium (except color and background-color). Options are just not meant to be styled.

You need to setup an alternative dropdown using a list (or something) similar.

feeela
  • 29,399
  • 7
  • 59
  • 71
  • Thanks....But....Do you have a any idea how to get all countries flag with countries name using only HTML and CSS? – C. Patel Nov 24 '15 at 10:52
0

Yes Problem is solved

After using j-query code countries flags are display in all browser

C. Patel
  • 1
  • 3