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.

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?1733756310855") // for formatting/placeholders etc
});