ngx-intl-tel-input dropdown hover effect how to disable

Problem:
I am seeing a gray background color when I hover over the dropdown items in the country list. I want to disable this hover color while keeping the dropdown functional. I tried using background-color: transparent !important;, but the gray color still appears.

What I’ve Tried:
Setting background-color: transparent !important; on .iti__country-list .iti__country:hover
Using different background colors and even initial, but none of these worked.

<div class="form-field">
  <label for="phone">Phone Number<span class="required">*</span></label>
  <ngx-intl-tel-input
    class="ngx-tel-input"
    [preferredCountries]="['us', 'gb']"
    [enableAutoCountrySelect]="true"
    [enablePlaceholder]="true"
    [searchCountryFlag]="true"
    [searchCountryField]="[SearchCountryField.Name, SearchCountryField.DialCode]"
    [selectedCountryISO]="CountryISO.UnitedStates"
    [separateDialCode]="true"
    formControlName="mobileNumber"
  ></ngx-intl-tel-input>
</div>

Problem:
I am seeing a gray background color when I hover over the dropdown items in the country list. I want to disable this hover color while keeping the dropdown functional. I tried using background-color: transparent !important;, but the gray color still appears.

What I’ve Tried:
Setting background-color: transparent !important; on .iti__country-list .iti__country:hover
Using different background colors and even initial, but none of these worked.

You need to sign in to view this answers