react-phone-input-2样式修改：添加圆角、移除下拉按钮及调整国旗样式

以下是针对你需求的具体修改方案，结合现有代码调整：

1. 添加边框圆角 #

直接在inputStyle中添加borderRadius，同时给国家选择器区域设置对应圆角，保证整体样式统一：

<PhoneInput
  inputStyle={{
    height: '25px',
    width: '90px',
    paddingRight: '0px',
    paddingLeft: '50px',
    paddingBottom: '16px',
    fontSize: '14px',
    borderRadius: '8px', // 输入框圆角，数值可按需调整
    border: '1px solid #ccc', // 可选：确保边框存在，否则圆角效果不明显
  }}
  countryCodeStyle={{
    borderRadius: '8px 0 0 8px', // 国家选择器左侧圆角，和输入框匹配
  }}
  // 其他原有props...
/>

2. 移除下拉按钮和图标 #

通过CSS隐藏对应元素，分两种情况处理：

• 若需保留国家切换功能（点击国旗打开下拉框）：仅隐藏箭头图标
• 若无需切换国家：添加disableDropdown属性，同时隐藏按钮

在全局CSS中添加规则：

/* 仅隐藏下拉箭头 */
.react-phone-input-2 .flag-dropdown .arrow {
  display: none;
}

/* 若需完全隐藏下拉按钮（仅在disableDropdown时使用） */
.react-phone-input-2 .flag-dropdown .dropdown-button {
  display: none;
}

如果选择完全禁用下拉，组件需添加disableDropdown：

<PhoneInput
  // ...其他props
  disableDropdown
/>

3. 国旗设置为圆形显示 #

通过CSS给国旗图片添加圆角：

.react-phone-input-2 .flag {
  border-radius: 50%;
  overflow: hidden;
}

完整修改后代码示例 #

<PhoneInput
  inputStyle={{
    height: '25px',
    width: '90px',
    paddingRight: '0px',
    paddingLeft: '50px',
    paddingBottom: '16px',
    fontSize: '14px',
    borderRadius: '8px',
    border: '1px solid #ccc',
  }}
  countryCodeStyle={{
    borderRadius: '8px 0 0 8px',
  }}
  country="eg"
  enableSearch
  dropdownStyle={{ height: '90px', width: '330px' }}
  value={phone}
  onChange={(phone) => setPhone(phone)}
  // disableDropdown // 按需开启：完全禁用下拉功能时添加
/>

对应的全局CSS：

/* 隐藏下拉箭头 */
.react-phone-input-2 .flag-dropdown .arrow {
  display: none;
}

/* 国旗圆形显示 */
.react-phone-input-2 .flag {
  border-radius: 50%;
  overflow: hidden;
}

/* 可选：完全隐藏下拉按钮（配合disableDropdown使用） */
/* .react-phone-input-2 .flag-dropdown .dropdown-button {
  display: none;
} */

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