<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在这种情况下，可以避免自定义验证。

在react中，你可以用下面的选择标签给出一个虚拟值(比如-1)，同样的值可以用你的这个禁用选项。(为我工作)

const nonEmpty = selected[identifierField] || false;

<select
    onChange={(e) => {
      onSelect(
        options.find((option) => option[identifierField] === e.target.value)
      );
    }}
    value={nonEmpty || -1}
  >
    <option disabled value={-1}>Select Option</option>
    {options.map((option) => (
      <option key={option[identifierField]} value={option[identifierField]}>
        {option[displayField]}
      </option>
    ))}
  </select>

只要用“..”选项隐藏选择..”作为默认选项

选择风格= "显示:没有"

平板电脑:iPad Pro / iOS 15 / Safari的糟糕解决方案 下拉菜单中出现了一个不必要的行，仅用于实际设备。不会在模拟器上重现。

< td > < b >字段标签:< / b > < br > <选择风格= '对齐:左;' id='some_id' name='some_name'> .宽度:100% <option hidden selected>选择一个 <选项值=“Value1”> OptLabel1 > < /选项 <选项值= Value2的> OptLabel2 > < /选项 <选项值= ' Value3 ' > OptLabel3 < /选项> < /选择> 道明> < /

只需把“隐藏”选项你想隐藏下拉列表。

我只想说一句:

一些Safari浏览器似乎既不尊重“hidden”属性，也不尊重样式设置“display:none”(在MacOS 10.12.6下使用Safari 12.1测试)。没有显式的占位符文本，这些浏览器只是在选项列表中显示一个空的第一行。因此，为这个“虚拟”条目提供一些解释性文本可能是有用的:

<option hidden disabled selected value>(select an option)</option>

由于“disabled”属性，它无论如何都不会被主动选择。