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

Issue

I have successfully installed and configured the plugin - "ion-intl-tel-input" from <https://github.com/azzamasghar1/ion-intl-tel-input> 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 :

mobile.page.html

<ion-intl-tel-input class="lastnamefilter-new color"                
    required
    id="countrycode" 
    name="countrycode" 
    [(ngModel)]="countrycode"
    #phoneControl="ngModel"
    (ionChange)="showCountryName($event)" 
    [defaultCountryiso]="defaultCountryIsoTest"
    [dialCodePrefix]= "dialCodePrefix"
    [enableAutoCountrySelect]="enableAutoCountrySelect"
    [enablePlaceholder]="enablePlaceholder"
    [fallbackPlaceholder]="fallbackPlaceholder"
    [inputPlaceholder]="inputPlaceholder"
    [minLength]= "minLength"
    [modalTitle]="modalTitle"
    [modalCssClass]="modalCssClass"
    [modalSearchPlaceholder]="modalSearchPlaceholder"
    [modalCloseText]="modalCloseText"
    [modalCloseButtonSlot]= "modalCloseButtonSlot"
    [modalCanSearch]="modalCanSearch"
    [modalShouldBackdropClose]="modalShouldBackdropClose"
    [modalShouldFocusSearchbar]="modalShouldFocusSearchbar"
    [modalSearchFailText]="modalSearchFailText"
    [onlyCountries]= "onlyCountries"
    [preferredCountries]="preferredCountries"
    [selectFirstCountry]="selectFirstCountry"
    [separateDialCode]="separateDialCode"
    >
</ion-intl-tel-input>

mobile.page.ts

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

    @Component({
        selector: 'app-mobile',
        templateUrl: './mobile.page.html',
        styleUrls: ['./mobile.page.scss'],
    })
    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 :

What I'm expecting to achieve :

Thanks in advance..!

Solution

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