Large flags

It's easy to update the styling rules used by International Telephone Input. In your own CSS, you can specify your styling rules that will override those provided by the plugin, as long as they are loaded after the plugin's styles. You can change the font, the spacing, the placeholder, the dropdown etc. The one thing you cannot change with CSS is the flag images which are pre-built to a specific size. By default, this is aprx 20x15px, or 40x30px for the retina images. In order to show larger flags, you will need to re-build the images yourself.

In order to rebuild the flag images, first follow the Contributing guidelines to get the project building (npm run build) without any errors. Now, let's say you want to display the flag images at 80x60px, as per the demo below. First, in grunt/responsive_images.js, update the width/height for the retina task, where the images need to be twice as big as the display size, so we put width as 160 and height as 120. Second, in src/css/intlTelInput.scss, update the flagWidth/flagHeight variables near the top - these determine the display size, so we put flagWidth as 80px and flagHeight as 60px. You may also like to tweak some other numbers in this file e.g. some of the padding/margin values, to adjust for the large flags. Then run npm run build:img and then npm run build:css (in that order) to get the new flag images and updated CSS.

Demo

244 results found
  • Afghanistan+93
  • Åland Islands+358
  • Albania+355
  • Algeria+213
  • American Samoa+1
  • Andorra+376
  • Angola+244
  • Anguilla+1
  • Antigua & Barbuda+1
  • Argentina+54
  • Armenia+374
  • Aruba+297
  • Ascension Island+247
  • Australia+61
  • Austria+43
  • Azerbaijan+994
  • Bahamas+1
  • Bahrain+973
  • Bangladesh+880
  • Barbados+1
  • Belarus+375
  • Belgium+32
  • Belize+501
  • Benin+229
  • Bermuda+1
  • Bhutan+975
  • Bolivia+591
  • Bosnia & Herzegovina+387
  • Botswana+267
  • Brazil+55
  • British Indian Ocean Territory+246
  • British Virgin Islands+1
  • Brunei+673
  • Bulgaria+359
  • Burkina Faso+226
  • Burundi+257
  • Cambodia+855
  • Cameroon+237
  • Canada+1
  • Cape Verde+238
  • Caribbean Netherlands+599
  • Cayman Islands+1
  • Central African Republic+236
  • Chad+235
  • Chile+56
  • China+86
  • Christmas Island+61
  • Cocos (Keeling) Islands+61
  • Colombia+57
  • Comoros+269
  • Congo - Brazzaville+242
  • Congo - Kinshasa+243
  • Cook Islands+682
  • Costa Rica+506
  • Côte d’Ivoire+225
  • Croatia+385
  • Cuba+53
  • Curaçao+599
  • Cyprus+357
  • Czechia+420
  • Denmark+45
  • Djibouti+253
  • Dominica+1
  • Dominican Republic+1
  • Ecuador+593
  • Egypt+20
  • El Salvador+503
  • Equatorial Guinea+240
  • Eritrea+291
  • Estonia+372
  • Eswatini+268
  • Ethiopia+251
  • Falkland Islands+500
  • Faroe Islands+298
  • Fiji+679
  • Finland+358
  • France+33
  • French Guiana+594
  • French Polynesia+689
  • Gabon+241
  • Gambia+220
  • Georgia+995
  • Germany+49
  • Ghana+233
  • Gibraltar+350
  • Greece+30
  • Greenland+299
  • Grenada+1
  • Guadeloupe+590
  • Guam+1
  • Guatemala+502
  • Guernsey+44
  • Guinea+224
  • Guinea-Bissau+245
  • Guyana+592
  • Haiti+509
  • Honduras+504
  • Hong Kong SAR China+852
  • Hungary+36
  • Iceland+354
  • India+91
  • Indonesia+62
  • Iran+98
  • Iraq+964
  • Ireland+353
  • Isle of Man+44
  • Israel+972
  • Italy+39
  • Jamaica+1
  • Japan+81
  • Jersey+44
  • Jordan+962
  • Kazakhstan+7
  • Kenya+254
  • Kiribati+686
  • Kosovo+383
  • Kuwait+965
  • Kyrgyzstan+996
  • Laos+856
  • Latvia+371
  • Lebanon+961
  • Lesotho+266
  • Liberia+231
  • Libya+218
  • Liechtenstein+423
  • Lithuania+370
  • Luxembourg+352
  • Macao SAR China+853
  • Madagascar+261
  • Malawi+265
  • Malaysia+60
  • Maldives+960
  • Mali+223
  • Malta+356
  • Marshall Islands+692
  • Martinique+596
  • Mauritania+222
  • Mauritius+230
  • Mayotte+262
  • Mexico+52
  • Micronesia+691
  • Moldova+373
  • Monaco+377
  • Mongolia+976
  • Montenegro+382
  • Montserrat+1
  • Morocco+212
  • Mozambique+258
  • Myanmar (Burma)+95
  • Namibia+264
  • Nauru+674
  • Nepal+977
  • Netherlands+31
  • New Caledonia+687
  • New Zealand+64
  • Nicaragua+505
  • Niger+227
  • Nigeria+234
  • Niue+683
  • Norfolk Island+672
  • North Korea+850
  • North Macedonia+389
  • Northern Mariana Islands+1
  • Norway+47
  • Oman+968
  • Pakistan+92
  • Palau+680
  • Palestinian Territories+970
  • Panama+507
  • Papua New Guinea+675
  • Paraguay+595
  • Peru+51
  • Philippines+63
  • Poland+48
  • Portugal+351
  • Puerto Rico+1
  • Qatar+974
  • Réunion+262
  • Romania+40
  • Russia+7
  • Rwanda+250
  • Samoa+685
  • San Marino+378
  • São Tomé & Príncipe+239
  • Saudi Arabia+966
  • Senegal+221
  • Serbia+381
  • Seychelles+248
  • Sierra Leone+232
  • Singapore+65
  • Sint Maarten+1
  • Slovakia+421
  • Slovenia+386
  • Solomon Islands+677
  • Somalia+252
  • South Africa+27
  • South Korea+82
  • South Sudan+211
  • Spain+34
  • Sri Lanka+94
  • St. Barthélemy+590
  • St. Helena+290
  • St. Kitts & Nevis+1
  • St. Lucia+1
  • St. Martin+590
  • St. Pierre & Miquelon+508
  • St. Vincent & Grenadines+1
  • Sudan+249
  • Suriname+597
  • Svalbard & Jan Mayen+47
  • Sweden+46
  • Switzerland+41
  • Syria+963
  • Taiwan+886
  • Tajikistan+992
  • Tanzania+255
  • Thailand+66
  • Timor-Leste+670
  • Togo+228
  • Tokelau+690
  • Tonga+676
  • Trinidad & Tobago+1
  • Tunisia+216
  • Turkey+90
  • Turkmenistan+993
  • Turks & Caicos Islands+1
  • Tuvalu+688
  • U.S. Virgin Islands+1
  • Uganda+256
  • Ukraine+380
  • United Arab Emirates+971
  • United Kingdom+44
  • United States+1
  • Uruguay+598
  • Uzbekistan+998
  • Vanuatu+678
  • Vatican City+39
  • Venezuela+58
  • Vietnam+84
  • Wallis & Futuna+681
  • Western Sahara+212
  • Yemen+967
  • Zambia+260
  • Zimbabwe+263

Markup

<input id="phone" type="tel">

Code

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  initialCountry: "us",
  loadUtils: () => import("/intl-tel-input/js/utils.js?1743167482095") // for formatting/placeholders etc
});