如何在intl-tel-input v17.0.13下拉菜单中隐藏国家名称仅保留拨号码

解决方案 #

1 配置项说明 #

International Telephone Input v17.0.13版本暂无官方提供的Configuration Options配置项可直接实现隐藏下拉列表内国家名称、仅保留区号展示的需求。

2 可行实现方案（CSS覆盖法，最优解） #

直接通过自定义样式覆盖插件默认样式即可实现需求，不会影响插件原有功能的正常运行，操作成本最低。
将以下代码添加到你现有代码的<style>标签内即可：

/* 隐藏下拉列表中的所有国家名称 */
.iti__country-name {
    display: none !important;
}
/* 调整下拉框宽度适配仅展示区号的场景，可根据实际需求调整宽度数值 */
.iti__country-list {
    min-width: 120px !important;
}
/* 移除国家名称对应的右侧内边距，消除多余空白 */
.iti__country {
    padding-right: 12px !important;
}

额外注意事项 #

你当前的插件初始化配置中重复定义了两次initialCountry参数，后面的initialCountry: "us"会覆盖前面的initialCountry: "auto"，如果需要实现根据用户IP自动匹配归属地国家的功能，可以删除initialCountry: "us"这一行即可。

内容的提问来源于stack exchange，提问作者Grzes