ReactJs中如何将国家码下拉框宽度设置为仅适配国家码

我在React中开发国家码选择下拉菜单，菜单选项包含国家码和国家名称，希望下拉框（选中状态）的宽度仅适配国家码的宽度，目前给<select>添加了Tailwind的w-max-content类，但实际宽度会被最长的<option>内容（包含国家名称）撑开，达不到预期效果。

当前代码：

<div className="flex gap-6 flex-col mt-4 text-[#2c3345] font-semibold">
  <label htmlFor="phone">
    Phone Number <span className=" text-red-600">*</span>
  </label>
  <div className="flex gap-2 items-center text-[#2c3345] font-semibold">
    <select
      name="dropdown"
      id="dropdown"
      className="w-max-content  py-2"
    >
      {countryCode.map((element, index) => (
        <option key={index} value={element.code}>
          {element.code} - {element.country}
        </option>
      ))}
    </select>

    <input
      type="tel"
      name="phone"
      id="phone"
      required
      onClick={() => selectHandler("phone")}
      className={`bg-transparent outline-none border-b-2 ${selectedLink === "phone" ? "border-[#4065fa]" : "border-[#555959]"} `}
    />
  </div>
</div>

解决方案1：自定义下拉组件（推荐） #

原生<select>的宽度由内部最长的<option>决定，无法单独控制选中显示区域和下拉列表的宽度，因此推荐使用自定义下拉结构，分离显示区域与下拉选项：

import { useState } from 'react';

// 组件内状态定义
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [selectedCountry, setSelectedCountry] = useState(countryCode[0]);

// 渲染代码
<div className="flex gap-6 flex-col mt-4 text-[#2c3345] font-semibold">
  <label htmlFor="phone">
    Phone Number <span className="text-red-600">*</span>
  </label>
  <div className="flex gap-2 items-center text-[#2c3345] font-semibold">
    {/* 自定义下拉容器 */}
    <div className="relative">
      {/* 选中状态显示区域：仅展示国家码，宽度自适应内容 */}
      <button 
        className="w-max-content py-2 px-3 border bg-white flex items-center justify-between cursor-pointer"
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
      >
        {selectedCountry.code}
        {/* 下拉箭头图标 */}
        <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {/* 下拉列表：宽度自适应完整选项内容 */}
      {isDropdownOpen && (
        <div className="absolute top-full left-0 mt-1 bg-white border shadow-lg z-10 w-auto">
          {countryCode.map((element, index) => (
            <div 
              key={index} 
              className="px-3 py-2 hover:bg-gray-100 cursor-pointer"
              onClick={() => {
                setSelectedCountry(element);
                setIsDropdownOpen(false);
              }}
            >
              {element.code} - {element.country}
            </div>
          ))}
        </div>
      )}
    </div>

    <input
      type="tel"
      name="phone"
      id="phone"
      required
      onClick={() => selectHandler("phone")}
      className={`bg-transparent outline-none border-b-2 ${selectedLink === "phone" ? "border-[#4065fa]" : "border-[#555959]"} `}
    />
  </div>
</div>

这种方式可以完全控制选中区域的宽度，下拉列表也能完整展示国家码和名称，同时支持自定义样式，兼容性更好。

解决方案2：CSS技巧（原生select兼容） #

如果坚持使用原生<select>，可以通过CSS控制选中状态隐藏国家名称，下拉时显示：

1. 修改option结构，给国家名称添加包裹元素：

<option key={index} value={element.code}>
  {element.code} <span class="country-label"> - {element.country}</span>
</option>

2. 添加自定义CSS（需放在全局样式或组件的style标签中）：

/* 选中状态下隐藏国家名称 */
select option:checked .country-label {
  display: none;
}
/* 下拉展开时显示所有国家名称 */
select:focus option .country-label {
  display: inline;
}

保留<select>的w-max-content类，此时选中状态仅显示国家码，宽度适配内容；下拉展开时会显示完整的国家码+名称。注意：该方法在部分浏览器（如Safari）可能存在兼容性问题。

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