JSFiddle - React, Tailwind, and code Playground

by padma rubhan

HTML

<script src="https://raw.github.com/Bluefieldscom/intl-tel-input/master/build/img/flags16.png"></script>
<body>
  <div id="container">
    <div id="update_issuer">
      <form class="form-horizontal" id="frm_activate_phones">
        <fieldset>
          <div class="control-group">
            <div class="controls">
              <div id="phone_fields">
                <input type="tel" placeholder="Primary Phone Number" class="input-large" id="p1" name="phone1" />


              </div>

              <input class="btn btn-large btn-primary" id="btn" type="button" value="Submit" />
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</body>

CSS

.intl-tel-input {
  position: relative;
}

.intl-tel-input .hide {
  display: none;
}

.intl-tel-input .flag-dropdown {
  position: absolute;
  z-index: 1;
  cursor: pointer;
}

.intl-tel-input .flag-dropdown .selected-flag {
  margin: 1px;
  padding: 6px 16px 6px 7px;
}

.intl-tel-input .flag-dropdown .selected-flag:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.intl-tel-input .flag-dropdown .selected-flag .down-arrow {
  top: 6px;
  position: relative;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid black;
}

.intl-tel-input .flag-dropdown .country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1;
  overflow-y: scroll;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #cccccc;
  position: absolute;
  top: 29px;
  width: 330px;
  height: 200px;
}

.intl-tel-input .flag-dropdown .country-list .divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #cccccc;
}

.intl-tel-input .flag-dropdown .country-list .country {
  line-height: 16px;
  padding: 4px 10px;
}

.intl-tel-input .flag-dropdown .country-list .country .dial-code {
  color: #999999;
}

.intl-tel-input .flag-dropdown .country-list .country.highlight {
  background-color: rgba(0, 0, 0, 0.05);
}

.intl-tel-input .flag-dropdown .country-list .flag {
  display: inline-block;
  vertical-align: bottom;
}

.intl-tel-input .flag-dropdown .country-list .flag,
.intl-tel-input .flag-dropdown .country-list .country-name {
  margin-right: 6px;
}

.intl-tel-input input {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 30px;
  padding-left: 47px;
  position: relative;
  z-index: 0;
}


/* originally from https://github.com/lafeber/world-flags-sprite */

.f16 .flag {
  width: 16px;
  height: 16px;
  background: url("../img/flags16.png") no-repeat;
}

.f16 ._African_Union {
  background-position: 0 -16px;
}

.f16...

JavaScript

(function($, window, document, undefined) {
  var pluginName = "intlTelInput",
    defaults = {
      preferredCountries: ["US", "GB"],
      americaMode: true
    };

  function Plugin(element, options) {
    this.element = element;
    this.options = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }
  Plugin.prototype = {
    init: function() {
      var that = this;
      // process preferred countries - iterate through the preferences,
      // finding the relevant data from the provided intlTelInput.countries array
      var preferredCountries = [];
      $.each(this.options.preferredCountries, function(i, pc) {
        var result = $.grep(intlTelInput.countries, function(c) {
          return c.cca2 == pc;
        });
        if (result.length) {
          preferredCountries.push(result[0]);
        }
      });
      // telephone input
      this.telInput = $(this.element);
      // if empty, and americaMode is disabled, default the input to the american dial code
      if (this.telInput.val() === "" && !this.options.americaMode) {
        this.telInput.val("+1 ");
      }
      // containers (mostly for positioning)
      this.telInput.wrap($("<div>", {
        "class": "intl-tel-input"
      }));
      var flagsContainer = $("<div>", {
        "class": "flag-dropdown f16"
      }).insertBefore(this.telInput);
      // currently selected flag (displayed to left of input)
      var selectedFlag = $("<div>", {
        "class": "selected-flag"
      }).appendTo(flagsContainer);
      // here we default to the first country in the list
      var firstCountry = preferredCountries[0].cca2.toLowerCase();
      this.selectedFlagInner = $("<div>", {
        "class": "flag " + firstCountry
      }).appendTo(selectedFlag);
      // CSS triangle
      $("<div>", {
        "class": "down-arrow"
      }).appendTo(this.selectedFlagInner);
      // country list contains: preferred countries, then divider,...