How to deactivate the dropdown hover effect in ngx-intl-tel-input

Issue: When hovering over the dropdown items in the country list, I'm encountering a gray background color that I'd like to remove while still maintaining the functionality of the dropdown. Despite attempting to set background-color: transparent !important;, the gray color persists.

Solutions Attempted: I've tried setting background-color: transparent !important; on .iti__country-list .iti__country:hover and experimenting with different background colors and even 'initial', but none of these solutions have been effective.

<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>

/* CSS Styles */
.ngx-tel-input .iti {
    width: 99% !important;
}

.ngx-tel-input input {
    width: 100% !important;
    padding-left: 60px !important;
    height: 74px;
    border-radius: 61px;
    background-color: rgba(217, 217, 217, 0.23);
    border: 1px solid #CDC9C9;
}

/* Other CSS Rules... */
htmlcssangularbootstrap-4

Answer №1

If you're facing an issue, try utilizing the following CSS code snippet that adjusts the background-color to transparent.

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: transparent;
}

To identify the problematic element, inspect it, and then in the right sidebar, click on :hov to simulate hover effect. One of the CSS rules will likely have a background-color property; simply copy that rule and apply it within your own CSS.

Check out the Stackblitz Demo for a visual example!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the browser window is resized, the footer starts to cover the content

To prevent the divs from overlapping when the browser window is resized vertically, take a look at the code snippet below: <html> <body> <style> #box { display: flex; flex-direction ...

htmlcssflexbox

CSS slider thumb with visible track behind it

Looking at the images below, or visiting , you can notice that the slider track is visible behind the slider thumb. Check out the images here: Image 1 and Image 2. The CSS for my slider looks like this: input[type=range] { appearance: none; backgro ...

htmlcssnext.js

The positioning of the <thead> element does not seem to be functioning properly

I attempted to create a background for the header (thead) using a pseudo element (:after) because I wanted the background to span from one edge to another edge (including both left and right side padding). However, thead is not taking a relative position a ...

htmlcsscss-position

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

https://i.sstatic.net/muMSG.png One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - ...

javascriptjquerycssipad

Attaching a modal to an entity

I am currently working on binding a Knockout (KO) viewmodel to a Bootstrap modal, but it seems like I am overlooking a step to direct KO to fill in the input fields. Below is the current setup: The template for the modal: <script type="text/html" id= ...

javascriptjquerytwitter-bootstrapknockout.jsbootstrap-4

What is causing this code to keep iterating endlessly?

I have a basic jquery script embedded in my HTML code that utilizes the cycle plugin for jQuery. The problem I'm facing is that when I interact with the slideshow using the "next" or "previous" buttons, it continues to loop automatically after that in ...

javascriptjqueryhtmlwebcycle

Printing the contents of a datatable in HTML can be achieved in VB.NET by including headers and setting paper orientation, fit to page, and grand total for print preview and direct print

I'm attempting to print the contents of a datatable in HTML for print preview and direct printing, including headers, setting paper size, orientation, and fitting to page in VB.NET. While it may be easy to accomplish this using an rdlc report, I am u ...

htmlvb.netprintingdatatablereporting

Obtain the identifier for a single button within a collection of buttons in an HTML form using Django

I've incorporated Django as the framework for a tracking platform, utilizing it as an FSM. At this juncture, I aim to enable users to modify the machine's state. The state is denoted by a django-fsm field, essentially a CharField integrated with ...

jquerypythonhtmldjangoforms

Changing HTML with defined PHP boundaries

I have a basic HTML wrapper and a PHP function that reads data from a file, splitting it into div tags for things like comments or forum posts. The text file is divided by delimiters to indicate the start of each section. The script correctly increments a ...

phphtmlloopsfile-io

Offspring component fails to reverse the skew as intended

Is it possible to skew a navigation bar without affecting the text inside it? I tried skewing the main div of the navigation bar and using a negative skew value on the text, but it didn't work as expected. How can I achieve this effect successfully? ...

htmlcss

Discovering dynamic content enclosed by static values in Applescript

Just starting out with applescript and facing a challenge. I need to extract a string from a web page via Safari and assign it to a variable. The target string varies, but the words before and after it remain constant. For instance: Apple 1293.34 USD The ...

javascriptstringapplescripthtml

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

javascripthtml

In Angular2, the derived class can inherit decorators

Within my Angular application, I am utilizing the BaseComponent which has a specified template. My goal is to use this same template HTML in a component that extends the base one. However, I am aware that class inheritance in Angular2 only applies to cla ...

inheritanceangular

Having a Jquery resizing problem? No worries! When the width is less than 768, simply enable the click option. And when the width is

HTML <div class="profile"> <a href="#" class="hoverdropdown" onclick="return false;">Profile</a> <ul class="dropdown" style="display: none;"> <li><a href="#">Dashboard&l ...

javascriptjqueryhtmlcss

Refusing to include two values due to the presence of a comma in JavaScript

I'm trying to add two values with commas and .00 (Example: 1,200.23 + 2,500.44) but it's not working because the textbox includes commas as required by my system. The result shows NaN because the comma is considered a special character. It was w ...

javascriptphpcsshtmlcodeigniter

Utilizing Django framework for crafting a captivating homepage

Successfully set up the django framework and developed an app for my homepage. I added the app to the settings in the project folder and was able to get the HTML running smoothly. However, I am experiencing issues with styling as the CSS won't apply. ...

pythonhtmlcssdjango

The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...

htmlcssradio-button

A guide on aligning text at the center of a List with an included image

I'm new to CSS and struggling to figure out how to vertically center text within an unordered list that also contains an image. I would like to add a logo to my navigation ul and have the text centered, but it is currently sticking to the bottom of t ...

htmlcss

"Allowing the PDF file type to be passed as a prop to a div instead of an input

In my project using semantic-ui-react, I encountered an issue while trying to validate input in a form by passing the accept:pdf prop. The code snippet I used is as follows: <Input label='Business Plan__' fluid accept= ".pdf" type="fil ...

htmlreactjssemantic-ui-react

Ensuring image stays centered always

I have a logo image that I want to center regardless of window size. Despite trying auto margins, I haven't been successful in achieving this. The logo image needs to overlap the bottom of my navigation bar, which is positioned above the logo. HTML ...

htmlcssimagecentergraphical-logo