ion-intl-tel-input default country placeholder issue with Ionic 6.20.1


I have successfully installed and configured the plugin – "ion-intl-tel-input" from <> which is working fine. But I need to reset the default country’s select box placeholder from "Country" to blank flag as placeholder in that. I have spent around 1 week for this, but nothing fruitful.

(Note) : I don’t want to achieve default "[defaultCountryiso]" or first "[selectFirstCountry]" country selection at first time. It should be a manual selection option opened for user.

Here is my code for the reference :

     <ion-intl-tel-input class="lastnamefilter-new color"                
        [dialCodePrefix]= "dialCodePrefix"
        [minLength]= "minLength"
        [modalCloseButtonSlot]= "modalCloseButtonSlot"
        [onlyCountries]= "onlyCountries"

  import { IonIntlTelInputModule } from 'ion-intl-tel-input';

    selector: 'app-mobile',
    templateUrl: './',
    styleUrls: ['./'],
  export class MobilePage implements OnInit {

    countrycode = {
      isoCode: '',
      dialCode: '',
      internationalNumber: '',
      nationalNumber: ''
    country_code: any;
    defaultCountryIsoTest = '';
    dialCodePrefix = '+';
    enableAutoCountrySelect = true;
    enablePlaceholder = true;
    fallbackPlaceholder = '';
    inputPlaceholder = 'Enter Mobile Number';
    minLength = '8';
    modalTitle = 'Select Country';
    modalCssClass = '';
    modalSearchPlaceholder = 'Enter country name';
    modalCloseText = 'Close';
    modalCloseButtonSlot = 'end';
    modalCanSearch = true;
    modalShouldBackdropClose = true;
    modalShouldFocusSearchbar = true;
    modalSearchFailText = 'No countries found.';
    onlyCountries = [];
    preferredCountries = ['in', 'sg'];
    selectFirstCountry = false;
    separateDialCode = false;
    disableTest = false;

   constructor(private ionIntlTelInputModule:IonIntlTelInputModule ) {}

   showCountryName(obj) {
     console.log(this.countrycode, obj);

Screenshot of what I’m getting :

enter image description here

What I’m expecting to achieve :

enter image description here

Thanks in advance..!


After a guidance from my senior dev got the solution simply with CSS.

Here it is:

   ion-intl-tel-input {
    ::ng-deep .ionic-selectable-has-placeholder div.ionic-selectable-value-item 
      content: "";
      display: inline-block;
      width: 23px;
      background-color: var(--placeholder-color, #999);
      height: 18px;
      font-size: 0px;

Answered By – Mano Mahe

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published