Get best of the week

在没有JavaScript的情况下（几乎）对Select-Option进行样式设置

设置一些标准元素的样式是一项艰巨的任务。

当然，一个好的专家可以使任何事物都风格化，但是一切都取决于此操作的复杂性。

设置单选按钮和复选框的样式将花费大量时间- 使用隐藏的输入来设置标签样式的想法并不是什么新鲜事，并且早已被广泛使用。风格化其余部分-有JavaScript。 今天，我想告诉您有关如何使用最少的JavaScript代码（从0到26行）和最少的附加HTML标记来对下拉列表进行样式设置相对容易。





使用JavaScript轻松选择（几乎）

前几天，经常发生，我需要设置一个下拉列表的样式。但是，它仅在移动版本中才成为下拉列表，在此之前，它的行为类似于最普通的单选按钮组。

因此，当我几乎要写另一种令人毛骨悚然的结构来替代不幸的Select时，我有一个问题：

为什么？

通常，这个问题会导致明智的拖延，对生活的重新思考等，但是这一次出了点问题，我意识到这个问题确实很好，而且最重要的是-非常有用。


一个小型的教育计划：

因此，对于那些在坦克上的人以及那些下拉列表造成了极大痛苦以至于他们决定把它们当作噩梦而忘却的人，我会（真的）稍微提醒你这是什么。

下拉列表包含2个主要元素：

  1. 选择 -整个列表的容器
  2. 选项 -清单项目

有时还使用OptGroup（一组列表项），但到目前为止，其实现仍保留在JavaScript中。下拉列表

的主要功能是将有关所选项目的信息发送到服务器。

为了完整起见，这是元素属性的列表（以便您可以估计将要实现的元素数量）：

  1. 选择 - 禁用，形式，多种，名称，所需，大小
  2. 选项 - 禁用，标签，选择，值

也许到此，我们将以描述结束，然后继续执行。


因此，已经写了许多单词，因此更接近代码：

<form>
  <div class="content">
    <h3 class="title"> 0 </h3>

    <input id="selectName0" type="radio" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="radio" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="radio" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

那么这段代码有什么用呢？（特别删除了在解释过程中可以省略的所有内容）。

请注意，由于使用了输入+标签，因此选择和选项功能中的哪些项已自动变为可能：

  1. 选择 -表格，名称，必填
  2. 选项 -禁用，标签，选定，值

剩下的就是要实现的一切：

  1. 选择 -已禁用，多个，大小
  2. 选项 -完全实施

仅通过添加输入+标签包，我们就将必要功能的列表从10点减少到了3点。不错，但这还没有结束，对吧？

要实现Select.multiple（多项选择）项，只需执行以下操作：

<form>
  <div class="content">
    <input id="selectName0" type="checkbox" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="checkbox" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="checkbox" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

我们只需将输入的类型从Radio更改为Checkbox，并得到几乎完整的多重模拟。

不同之处在于，对于多个选择，您无需按住ctrl键（嗯，如果有人想完全模仿此功能-JavaScript可以帮助您）。

剩下什么？

  1. 选择 -已禁用，大小
  2. 选项 -完全实施

好吧，使用CSS来实现Select.disabled和Select.size都非常简单：

  • Select.size-您将设置的大小。您只需要添加容器。
  • select.disabled-对于容器，您需要添加指针事件：none可以取消对任何用户操作（悬停，单击等）的反应，那么，您可以使其透明一点。

因此，主要功能是。有什么不见了？

您还需要为下拉菜单添加标头自动完成功能（唯一选择），并且在重置表单（“ 重置”按钮）时也会出现问题，因为 标题将不会重置。但这甚至是完全可以解决的（使用JavaScript）。


现在-示例：

一些实现（带有一个选择的下拉菜单）：


还有一点（不是带有多个选项的下拉菜单）：


奖励：我不知道为什么要这么做，但是...一个下拉菜单，可以选择并重置基于CSS的标题：





为什么需要这个？

基于评论的事实，并不是每个人都理解为什么此代码会很有用，我认为有必要作一些澄清。

样式化表单的下拉列表时：
<select>
  <option> 1</option>
  <option> 2</option>
</select>

有严重的样式限制。因此，它们被简单的列表取代：
<ul>
  <li> 1</li>
  <li> 2</li>
</ul>

使用JavaScript可以挂起所有必需的功能。

由于列表最初不会以任何方式与表单交互，因此会引起问题。

不仅有必要实现所有基本功能：

  • 切换点及其相互作用
  • 状态（已选中，已禁用）
  • 绑定到表单并将数据发送到服务器
  • 初始化初始数据（自动填充）
  • 表单重置（当您单击“重置”按钮时，列表必须在初始化期间返回到该状态）


实际上，如果JavaScript出现问题，没关系，因为脚本未加载，出现了错误，进行了更改-如果发生任何问题，下拉列表将变成... 看起来像一个下拉列表，但不起作用。
通常。没门。

对于用户来说，它看起来像这样：有一个下拉列表，但是您不能使用它。

对于服务器来说，这看起来甚至“更有趣”-表单已到达，其中没有足够的数据。在开发过程中预先预见到这样的情况是很好的。毕竟，已经预见到了，对吗？


最终解决方案的优点：

  • ( ), . JavaScript ( ). , — . , — / — html ( JS), .
  • . , , ( ). ul — li , .



(. , , JavaScript' / ):

  • tab
  • ( select -)
  • ( , )
  • select ( select . select)
  • , (JS )
  • ( OptGroup) (, )


如您所见，上述缺点对绝大多数列表都不是至关重要的，并且必要时可以使用JavaScript实现，因此...


欢迎来到这个世界，您用来样式化类似Select-Option的列表的库将变得更小，并且在没有库的情况下使用这些列表将变得非常舒适！



UPD：事实证明，在复选框的情况下，required属性无法正常工作，并且还需要使用JavaScript进行仿真（目前，所有标记为required的复选框都是强制性的，只有它们是必需的）

More articles:


All Articles