SelectMenu HTML标签-css教程-PHP中文网

SelectMenu HTML标签

介绍selectmenu ：一种革命性的形式控制

本文深入研究了实验性的selectmenu形式控制，与传统相比，其出色的样式功能<select></select>元素。我们将探讨其开发的原因及其革新Web形式设计的潜力。

Web开发人员经常将造型形式控制的局限性作为主要平台缺陷。 2020年CSS调查状态在最需要的十大改进中排名出样式<select></select>专门被确定为有效风格的最有问题的元素。而当按钮部分<select></select>相对易于样式，自定义下拉菜单中的选项仍然非常具有挑战性。

因此，许多设计系统和组件库使用HTML，CSS和JavaScript从头开始创建自定义选择元素。但是，实现适当的可访问性，键盘导航和准确的弹出定位是复杂且耗时的，通常会导致无法访问的精选菜单。

selectmenu控件旨在通过提供内置的，高度可观的替代方案来解决这个持久问题。

开放UI计划

开放UI计划是一项涉及开发人员，设计师和浏览器实施者的协作努力，正在推动selectmenu的开发。它的目标是使开发人员能够完全样式并扩展内置的UI控件，包括selectmenu ，下拉列表，复选框和无线电按钮。这涉及为实施和解决可访问性要求创建规格。

尽管仍处于早期阶段，该项目仍在迅速发展，结果令人鼓舞。您可以参加开放UI社区并为其开发做出贡献。

`selectmenu`控件

SelectMenu是在Chromium（主要由Microsoft Edge团队，主要由Microsoft Edge团队）实施的） selectmenu ，是一种新的内置控制，可提供熟悉的选择选择体验。它具有显示选定值的按钮，通过单击按钮触发的弹出窗口以及弹出窗口中的选项列表。

为什么要有新名称？

名称“ SelectMenu”是一个占位符，主要是因为显着更改现有<select></select>元素将引起广泛的兼容性问题。因此， selectmenu被设计为独立控制。

入门

虽然尚未准备就绪，但您可以使用以下方式尝试selectmenu ：

使用基于铬的浏览器（Chrome或Edge）的金丝雀版。
启用“实验Web Platform”的标志about:flags和重新启动。
代替<select></select>使用selectmenu网页中的元素。

尽管默认情况下提供了基本功能，但selectmenu的真正功能在于其样式和可扩展性选项。

鼓励反馈！

Open UI团队欢迎反馈。早期测试有助于改善控制。通过打开的UI GITHUB存储库报告错误或限制。

了解`selectmenu`解剖结构

造型selectmenu需要了解其内部结构：

<selectmenu></selectmenu> ：包含按钮和列表框的根元素。
<button></button> ：Triggers ListBox可见性。
<label></label> ：（可选）显示选定的值。不一定在<button></button>。
<listbox></listbox> ：包装<option></option>和<optgroup></optgroup>元素。
<optgroup></optgroup> ：组<option></option>具有可选标签的元素。
<option></option> ：表示可选的值。

默认行为

selectmenu模仿<select></select>。最小的标记就足够了：

<selectmenu>
  <option value="Option 1">选项1</option>
  <option value="Option 2">选项2</option>
  <option value="Option 3">选项3</option>
</selectmenu>

登录后复制

默认<button></button>，，，，<label></label> ，和<listbox></listbox>元素是自动生成的。

使用`::part()`造型

::part()伪元素允许造型单个组件：

 .my-select-menu :: part（button）{
  颜色：白色；
  背景色：＃f00;
  填充：5px;
  边界拉迪乌斯：5px;
}

.my-select-menu :: part（listBox）{
  填充：10px;
  保证金顶：5px;
  边界：1PX固体红色；
  边界拉迪乌斯：5px;
}

登录后复制

这会使用按钮和列表框。 ::part()可以使用<button></button>，，，，<label></label> ，和<listbox></listbox>。

自定义标记

对于更大的控制，请使用命名插槽替换默认标记：

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">打开</button>
    <span class="label">选择一个选项</span>
  </div>
  <option value="Option 1">选项1</option>
  <option value="Option 2">选项2</option>
  <option value="Option 3">选项3</option>
</selectmenu>

登录后复制

slot="button"属性替换了默认按钮。 behavior="button"分配按钮行为和可访问性。类似的技术适用于<listbox></listbox>。

扩展标记

添加新元素以扩展功能：

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3>花朵</h3>
      <option value="Rose">玫瑰</option>
      <h3>树木</h3>
      <option value="Willow">柳</option>
    </div>
  </div>
</selectmenu>

登录后复制

这增加了自定义分组和样式。