如何在django-phonenumber-field中实现带国旗的单行手机号输入框

整个改造无需调整后端校验、存储逻辑，原有Babel配置可完全复用，所有改动集中在前端渲染层与自定义表单控件层，不会影响现有组件的正常运行。

提前准备 #

• 准备国旗图标资源：使用与2位ISO国家码一一对应的SVG图标即可，可直接复用Babel自带的国家编码映射表，无需单独维护国家-区号-国旗的对应关系，避免匹配错误。
• 不要直接修改第三方包源码，所有自定义逻辑通过继承原有控件、重写渲染模板实现，后续依赖升级不会丢失自定义配置。

改造1：下拉选项仅显示国旗+国际区号，隐藏国家名称 #

默认区号下拉的渲染结构为「国旗+国家名称+国际区号」，只需调整选项渲染规则与样式即可缩小控件尺寸：

1. 重写下拉选项模板，剔除国家名称对应的文本节点，仅保留国旗元素与国际区号文本
2. 压缩选项内边距，将选择框宽度设置为自适应内容宽度，最大宽度限制在120px以内，避免占用多余空间
3. 保留选项原有value值（国家编码），不改动字段提交的参数结构，后端无需调整取值逻辑
   核心样式参考：

/* 下拉选项样式 */
.phone-code-select option {
  padding: 4px 8px 4px 28px;
  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 16px 12px;
}
/* 隐藏国家名称文本 */
.phone-code-select option .country-name {
  display: none !important;
}
/* 选择框基础样式 */
.phone-code-select {
  width: fit-content;
  max-width: 120px;
  appearance: none;
  padding-right: 20px;
  background-position: 6px center;
  background-size: 16px 12px;
  background-repeat: no-repeat;
}

改造2：将区号选择、号码输入合并为单行单输入框 #

默认两个字段为独立块级元素，通过调整DOM结构与样式即可实现合并效果：

1. 为区号选择框、号码输入框包裹统一容器，给容器设置普通输入框的边框、圆角样式，模拟单输入框视觉效果
2. 清除两个子控件的默认边框、外发光样式，将区号选择框放在容器左侧，添加右侧分隔线，设置固定宽度
3. 号码输入框设置为自适应宽度，占满容器剩余空间
4. 给容器添加聚焦态样式：当内部任意控件聚焦时，容器边框切换为主题高亮色，匹配普通输入框的交互逻辑
   核心DOM结构参考：

<div class="combined-phone-field">
  <select class="phone-code-select">
    <!-- 仅含国旗+区号的选项列表 -->
  </select>
  <input type="tel" class="phone-number-input" placeholder="请输入手机号">
</div>

核心样式参考：

.combined-phone-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
/* 聚焦态样式 */
.combined-phone-field:focus-within {
  border-color: #409eff;
}
.phone-code-select {
  height: 100%;
  border: none;
  outline: none;
  border-right: 1px solid #eee;
  padding: 0 24px 0 30px;
  cursor: pointer;
  background-color: transparent;
}
.phone-number-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 14px;
  background-color: transparent;
}

适配提示 #

• 如果是Django表单渲染场景，可自定义继承PhoneNumberPrefixWidget的控件类，重写render方法输出上述合并后的DOM结构，直接在表单字段中引用自定义控件即可，不需要修改模板里的渲染代码
• 下拉选择器的原生箭头如果样式不匹配，可以用背景图替换成自定义箭头图标，放在选择框右侧位置
• 改造完成后表单提交的参数结构和原有逻辑完全一致，不需要修改后端视图、序列化器的校验逻辑

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