Example: Styling

The two different settings for the defaultStyling option: 'inside' (default) and 'outside'.

Markup

<p>1. defaultStyling: "inside" (default)</p>
<input id="phone1"  type="tel" placeholder="e.g. +1 702 123 4567">

<p>2. defaultStyling: "outside" (looks the same, but isn't - see 3)</p>
<input id="phone2" type="tel" placeholder="e.g. +1 702 123 4567">

<p>3. defaultStyling: "outside" (with gap added)</p>
<div class="outside-gap">
  <input id="phone3" type="tel" placeholder="e.g. +1 702 123 4567">
</div>

Code

$("#phone1").intlTelInput({defaultStyling: "inside"});
$("#phone2").intlTelInput({defaultStyling: "outside"});
$("#phone3").intlTelInput({defaultStyling: "outside"});

Result