HTML Select Country Phone Code List with Flags

>_Countries dropdown with flags

Please use latest msDropdown. This jQuery plugin is now graduated.

Countries dropdown with flags

I’ve made an image dropdown. So I thought it can be used for a great purpose. Countries dropdown with flags. Right?

Well, here we goes. If you don’t want to go in technical etc just download it from the bottom links.

Please note: Verify the country flag. Its downloaded from http://code.google.com/p/csscountrycodes/.

• Auto Complete
• Flag with each country name
• Value has short code
• Auto-scroll to the value if not visible

Its not a full list. Just for an example.

 Andorra United Arab Emirates Afghanistan Antigua and Barbuda Anguilla Albania Armenia Netherlands Antilles  

Источник

HTML Select Country Dropdown List With Flags

HTML Select Code snippet for all the countries in the World with their flags. For this to work, we will need a few imports.

If you do not want to use BootStrap this is the code snippet for Simple HTML Country Select DorpDown.

 Select a country Not Specified Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia and Herzegowina Botswana Bouvet Island Brazil British Indian Ocean Territory Brunei Darussalam Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia Comoros Congo Congo, the Democratic Republic of the Cook Islands Costa Rica Cote d'Ivoire Croatia (Hrvatska) Cuba Cyprus Czech Republic Denmark Djibouti Dominica Dominican Republic East Timor Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Ethiopia Falkland Islands (Malvinas) Faroe Islands Fiji Finland France France, Metropolitan French Guiana French Polynesia French Southern Territories Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guinea Guinea-Bissau Guyana Haiti Heard and Mc Donald Islands Holy See (Vatican City State) Honduras Hong Kong Hungary Iceland India Indonesia Iran (Islamic Republic of) Iraq Ireland Israel Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Korea, Democratic People's Republic of Korea, Republic of Kuwait Kyrgyzstan Lao People's Democratic Republic Latvia Lebanon Lesotho Liberia Libyan Arab Jamahiriya Liechtenstein Lithuania Luxembourg Macau Macedonia, The Former Yugoslav Republic of Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Micronesia, Federated States of Moldova, Republic of Monaco Mongolia Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands Netherlands Antilles New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Northern Mariana Islands Norway Oman Pakistan Palau Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Poland Portugal Puerto Rico Qatar Reunion Romania Russian Federation Rwanda Saint Kitts and Nevis Saint LUCIA Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Seychelles Sierra Leone Singapore Slovakia (Slovak Republic) Slovenia Solomon Islands Somalia South Africa South Georgia and the South Sandwich Islands Spain Sri Lanka St. Helena St. Pierre and Miquelon Sudan Suriname Svalbard and Jan Mayen Islands Swaziland Sweden Switzerland Syrian Arab Republic Taiwan, Province of China Tajikistan Tanzania, United Republic of Thailand Togo Tokelau Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Turks and Caicos Islands Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States United States Minor Outlying Islands Uruguay Uzbekistan Vanuatu Venezuela Viet Nam Virgin Islands (British) Virgin Islands (U.S.) Wallis and Futuna Islands Western Sahara Yemen Yugoslavia Zambia Zimbabwe  

Источник

Adding Country Flags to Select Options in HTML and HTML5

To include external libraries in your Codepen project, you can use Solution 2 which allows you to add CSS and Javascript libraries that are not visible until you click on the settings/gear link. Alternatively, Solution 3 suggests closing the script tag. Another option is Solution 1 where you can use the jquery-image-dropdown plugin or follow the article on Icons for Select Menu Options in HTML/CSS. For HTML & CSS together, Solution 3 provides an example. Lastly, Solution suggests using FontAwesome & Font Flag Icons for select drop-downs with demos available for both.

How to make a languages selector button with flag? (html + js)

Based on the codepen provided, it is necessary to incorporate certain stylesheets in the following manner.

Also add the following scripts,

To incorporate CSS and Javascript libraries from external sources on Codepen, you must click the settings/gear link to reveal them as they are not initially visible.

Select Country Dropdown in html page, OP asked specifically for an HTML select tag, nothing more. – Stranger. Aug 10 at 17:42. Add a comment. 3. Select Tag : Country Name. you can write multipletag. Thetag is used to define the possible options to choose from. Code samplejSuites.dropdown(document.getElementById(‘dropdown’),

The best way to add images in <select> <option> [duplicate]

I believe that the implementation of the jquery-image-dropdown plugin can provide assistance to you.

Follow the steps outlined in the article titled «Icons for Select Menu Options in HTML/CSS» to customize your select menu icons.

 $(".dropdown img.flag").addClass("flagvisibility"); $(".dropdown dt a").click(function() < $(".dropdown dd ul").toggle(); >); $(".dropdown dd ul li a").click(function() < var text = $(this).html(); $(".dropdown dt a span").html(text); $(".dropdown dd ul").hide(); $("#result").html("Selected value is: " + getSelectedValue("sample")); >); function getSelectedValue(id) < return $("#" + id).find("dt a span.value").html(); >$(document).bind('click', function(e) < var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); >); $(".dropdown img.flag").toggleClass("flagvisibility"); 

 body < font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;>.desc < color:#6b6b6b;>.desc a .dropdown dd, .dropdown dt, .dropdown ul < margin:0px; padding:0px; >.dropdown dd < position:relative; >.dropdown a, .dropdown a:visited < color:#816c5b; text-decoration:none; outline:none;>.dropdown a:hover < color:#5d4617;>.dropdown dt a:hover < color:#5d4617; border: 1px solid #d0c9af;>.dropdown dt a .dropdown dt a span .dropdown dd ul < background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none; left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;>.dropdown span.value < display:none;>.dropdown dd ul li a < padding:5px; display:block;>.dropdown dd ul li a:hover < background-color:#d0c9af;>.dropdown img.flag < border:none; vertical-align:middle; margin-left:10px; >.flagvisibility

Please select the country

  
BrazilBR
  
FranceFR

One option to enhance the functionality of a select element is to utilize Selectize, a jQuery library that can transform it and enable the embedding of images and other dynamic features.

select#country option[value="USA"] < background-image:url(usa.png); >select#country option[value="UK"] < background-image:url(uk.png); >select#country option[value="France"]

Html — Add flag image to select option, It’s Difficult to Customize & Tags and tags are difficult to customize and anything that holds true for one browser is never true for the rest of them. Solution. Forget about customizing , create a pseudo- using and …

Icon flags with value in dropdown menu

Choose from Dropdowns that feature both FontAwesome and Font Flag symbols.

Demonstration of FontAwesome

 $( document.body ).on( 'click', '.dropdown-menu li', function( event ) < var $target = $( event.currentTarget ); $target.closest( '.btn-group' ) .find( '[data-bind="label"]' ).text( $target.text() ) .end() .children( '.dropdown-toggle' ).dropdown( 'toggle' ); return false; >);

.btn-input < display: block; >.btn-input .btn.form-control < text-align: left; >.btn-input .btn.form-control span:first-child < left: 10px; overflow: hidden; position: absolute; right: 25px; >.btn-input .btn.form-control .caret

Sample of Flag Icons in Different Fonts

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) < var $target = $( event.currentTarget ); $target.closest( '.btn-group' ) .find( '[data-bind="label"]' ).text( $target.text() ) .end() .children( '.dropdown-toggle' ).dropdown( 'toggle' ); return false; >);

/* CSS used here will be applied after bootstrap.css */.btn-input < display: block; >.btn-input .btn.form-control < text-align: left; >.btn-input .btn.form-control span:first-child < left: 10px; overflow: hidden; position: absolute; right: 25px; >.btn-input .btn.form-control .caret

Select2 drop-down for countries, with flags, The Select2; Examples — Templating shows the flag when you choose a country as the selected option in the non-drop-down view. I’ve copied what they’ve done, similar to your Demo 2 with flags however this does not show the flag upon chosing an option.

Источник

HTML Select Country Phone Code List with Flags

This is a code snippet for HTML Select country code list with flags. It is based on powerful twilio’s API. It is plug and play, everything is hosted on CDN. Its usage is simple, simply add this in the of your web page «head» tag.

var input = document.querySelector("#phone"); window.intlTelInput(input, < separateDialCode: true >);

var input = document.querySelector("#phone"); window.intlTelInput(input, < // show dial codes too separateDialCode: true, // If there are some countries you want to show on the top. // here we are promoting russia and singapore. preferredCountries: ["ru", "sg"], //Default country initialCountry:"sg", // show only these countres, remove all other onlyCountries: ["ru", "cn","pk", "sg", "my", "bd"], // If there are some countries you want to execlde. // here we are exluding india and israel. excludeCountries: ["in","il"] >);

Complete Code

Источник