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.

Continue reading...