时间戳

首页 > 解决方案 > 如何在不模糊禁用项目的情况下制作带有禁用选项的 Select 元素（HTML 电子邮件）

html - 如何在不模糊禁用项目的情况下制作带有禁用选项的 Select 元素（HTML 电子邮件）

问题描述

我的 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>

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

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

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

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

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

所以没有CSS。

标签： htmlcss

解决方案

代替<option>s，你可以滥用<optgroup>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>

推荐阅读