我只想说一句:

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

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

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

如果你使用的是Angular(2+)，(或任何其他框架)，你可以添加一些逻辑。逻辑是:如果用户还没有选择任何其他选项，则只显示一个空选项。 因此，在用户选择了一个选项之后，空选项就会消失。

对于Angular(9)，它看起来像这样:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

这应该会有帮助:

https://www.w3schools.com/tags/att_select_required.asp

< >形式 需要<选择> <选项值= " " > < /选项>没有 沃尔沃<选项值=“沃尔沃”> < /选项> 萨博<选项值= "萨博" > < /选项> <选项值= "奔驰" >奔驰> < /选项 <选项值=“奥迪”>奥迪> < /选项 < /选择> <按钮类型=“提交”> > < /按钮提交 > < /形式

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

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

我想一个好主意是使用单选按钮，设置#1为默认并隐藏它，给它一个例子 Name ="init"和一个值="null"或其他什么，由你决定!

这样单选按钮列表肯定有一个值，但默认为null可以在逻辑上使用!

我认为没有必要进一步阐述，因为这个想法可以很容易地通过显示来实现:没有;或者可见性:隐藏;

．.． 而我认为第一个显示:没有;是更好的选择:

如果一开始你不需要任何空选项，试试第一行:

    <option style="display:none"></option>