如何在不模糊禁用项目的情况下制作带有禁用选项的 Select 元素（HTML 电子邮件）[重复]答案

【问题标题】：how to make a Select element with disabled options without blurring the disabled items(HTML email) [duplicate]如何在不模糊禁用项目的情况下制作带有禁用选项的 Select 元素（HTML 电子邮件）[重复]
【发布时间】：2019-07-06 11:19:21
【问题描述】：

我的 html 内容如下所示：

<select style="background-color:#82DACA">
    <option style="display:none;">Click to check Files</option>
    <option>See the filenames below</option>
    <option disabled>file1</option>
    <option disabled>file2</option>
    <option disabled>file2</option>
</select>

我有一个选择元素，里面有禁用的项目。我将它们禁用的原因只是使它们不可选择。否则，您可以选择一个选项，而该选项将被选中，这是我不想要的。

问题是当我禁用这些选项时，它们看起来很模糊。我想要的是它们的选项应该清晰可见，但它们不应该是可点击的。即使它们是可点击的，也应该始终显示“点击检查文件”。

适用条件：我只能使用内联样式。（没有 js 或 css 文件或脚本。这是我选择选择元素来显示文件列表的唯一原因）

注意：我正在尝试使用 GMAIL API 将 HTML 内容作为电子邮件发送。并且电子邮件客户端中的 HTML 查看器没有标准化，并且大多数都不允许标记。出于这个原因，HTML 电子邮件通常包含大量的内联样式。我期待一个仅使用内联样式的解决方案。例如

<option style="display:none;">Click to check Files</option>

所以没有 CSS。

【问题讨论】：

" 即使它们是可点击的，“点击检查文件”也应该始终显示。" - 那你为什么不显示呢？？
“点击查看文件”将是第一次出现。当它被点击时不会显示并且“查看下面的文件名”将出现在顶部。

标签： html css

【解决方案1】：

你可以滥用<optgroup>s，而不是<option>s：

<select>
  <option style="display:none">Click to Check Files</option>
  <optgroup label="See the filenames below"></optgroup>
  <optgroup label="file1"></optgroup>
  <optgroup label="file2"></optgroup>
  <optgroup label="file2"></optgroup>
</select>

【讨论】：

我希望选项正确可见。即使我使用 optgroup，选项项看起来也很模糊，喜欢禁用。