如何禁用ngx-intl-tel-input下拉列表项的悬停背景色

问题原因 #

你之前用的.iti__country-list .iti__country:hover选择器没生效，大概率是样式优先级不够，被组件自带的默认样式覆盖了。另外这个组件的悬停状态可能还用到了专门的类.iti__country--hover，不是单纯靠:hover伪类控制的。

可行解决方案 #

用更具体的选择器结合你的自定义类ngx-tel-input，提升样式优先级，同时覆盖两种可能的悬停状态：

/* 移除国家选项的悬停背景色 */
.ngx-tel-input .iti__country-list .iti__country--hover,
.ngx-tel-input .iti__country-list .iti__country:hover {
  background-color: transparent !important;
}

/* 可选：如果连选中状态的背景色也想去掉，加上这段 */
.ngx-tel-input .iti__country-list .iti__country.iti__highlight {
  background-color: transparent !important;
}

为什么这样能生效？ #

• 加上外层的.ngx-tel-input类，让你的选择器优先级高于组件默认样式
• 同时覆盖.iti__country--hover类和:hover伪类，确保所有悬停场景都被处理

验证步骤（可选） #

1. 按F12打开浏览器开发者工具，鼠标悬停在国家选项上
2. 查看元素的样式面板，确认悬停时生效的是.iti__country--hover还是:hover伪类
3. 检查你的自定义样式是否出现在样式列表中，且优先级高于组件默认样式

整合后的完整CSS示例 #

把上面的样式加到你现有的CSS代码里即可，替换之前无效的悬停样式：

/* 你的原有样式保持不变 */
.ngx-tel-input .iti {
    width: 99% !important;
  }
   
  .ngx-tel-input input {
    width: 100% !important;
    padding-left: 83px  !important;
    height: 74px;
    border-radius: 61px;
    background-color: rgba(217, 217, 217, 0.23);
    border: 1px solid #CDC9C9;
  }
  .ngx-tel-input .iti__country .iti__name {
    margin-left: 15px;
    font-size: 16px;
  }

  .ngx-tel-input .iti__flag-container {
    width: 90px!important;
    height: 54px!important;
    padding-left: 14px;
}

.step_1_form {
    padding: 50px;
}

/* 添加新的悬停样式 */
.ngx-tel-input .iti__country-list .iti__country--hover,
.ngx-tel-input .iti__country-list .iti__country:hover {
  background-color: transparent !important;
}

/* 可选：移除选中状态背景 */
.ngx-tel-input .iti__country-list .iti__country.iti__highlight {
  background-color: transparent !important;
}

内容的提问来源于stack exchange，提问作者MOHAMMED MISHAL K