intl-tel-input组件CSS问题：国旗图标与输入框重叠及下拉样式修改

1. 修复国旗图标与输入框重叠问题 #

由于form-control默认样式和intl-tel-input的国旗容器布局冲突，通过以下CSS和初始化配置调整：

/* 给输入框左侧预留国旗容器的空间 */
#mobile_code {
  padding-left: 70px !important;
}

/* 让插件容器占满父元素宽度，避免布局挤压 */
.iti {
  width: 100%;
}

初始化插件时确保正确配置（若未初始化）：

const mobileInput = document.getElementById('mobile_code');
intlTelInput(mobileInput, {
  initialCountry: 'us', // 可按需设置默认国家
  separateDialCode: true, // 若显示国家码，需对应增加padding-left值
  utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js' // 可选，用于号码验证等功能
});

2. 设置下拉列表反转配色（黑底白字） #

覆盖插件默认下拉样式，适配页面视觉风格：

/* 下拉容器整体样式 */
.iti__dropdown {
  background-color: #000 !important;
  border-color: #333 !important;
}

/* 下拉选项文字与背景 */
.iti__dropdown-item {
  color: #fff !important;
}

.iti__dropdown-item:hover,
.iti__dropdown-item--selected {
  background-color: #333 !important;
}

/* 下拉搜索框样式 */
.iti__search-input {
  background-color: #222 !important;
  color: #fff !important;
  border-color: #444 !important;
}

.iti__search-input::placeholder {
  color: #aaa !important;
}

注：不同版本的intl-tel-input类名前缀可能不同，若使用旧版本，将iti__替换为iti-即可。

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