Primer CSS 选择表单介绍

Primer CSS 是一个由 Github 开源的 CSS 框架，致力于提高开发者在 Github 上的开发效率。选择表单（Select menus）是表单中常用的一种输入方式。在 Primer CSS 中，选择表单也有其独特的样式和用法。

选择表单的基本用法

选择表单的基本用法与 HTML 的标准用法一致。以下是一个基本的选择表单示例：

<label for="example-select">Example select</label>
<select id="example-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

在 Primer CSS 中，选择表单的样式已被重置，使其更符合 Github 的视觉风格。你只需要将标准的选择表单标签嵌套在一个带 .select-menu 类的 <div> 中，就可以得到一个具有 Github 风格的选择表单：

<div class="select-menu">
  <label for="example-select">Example select</label>
  <select id="example-select">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

在上面的例子中，选择表单的标签包含在了一个带 .select-menu 类的 <div> 中。.select-menu 类会为选择表单添加一些附加的样式，使其具有更好的视觉效果。

不同风格的选择表单

Primer CSS 中提供了多种不同类型的选择表单。以下是一些常见的类型：

Button Select

Button Select 是将下拉选择转换为按钮菜单的一种选择表单。它可以为选择菜单提供更大的点击面积和更具吸引力的 UI。以下是一个 Button Select 的示例：

<div class="select-menu">
  <button class="btn select-menu-button" type="button" aria-haspopup="true" aria-expanded="false">
    Example button select
  </button>
  <div class="select-menu-modal-holder">
    <div class="select-menu-modal">
      <div class="select-menu-list">
        <button class="select-menu-item" type="button" aria-checked="true">
          Option 1
        </button>
        <button class="select-menu-item" type="button" aria-checked="false">
          Option 2
        </button>
        <button class="select-menu-item" type="button" aria-checked="false">
          Option 3
        </button>
      </div>
    </div>
  </div>
</div>

在上面的示例中，我们用一个按钮作为选择菜单的触发器，然后用一个包含各个选项的下拉面板。这个 UI 在 Github 的许多页面，比如 Pull Requests 页面中都有使用。

Default Select

Default Select 是最常用的选择表单之一。它可以显示所有选项，并通过下拉菜单进行选择。以下是一个 Default Select 示例：

<div class="select-menu">
  <label for="example-select">Example select</label>
  <select id="example-select">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

在上面的示例中，选择表单的下拉列表会显示所有选项，用户可以通过菜单对它们进行选择。

结论

Primer CSS 提供了多种选择表单类型，使你可以根据自己的需要选择最适合的类型。我们希望本文能够帮助你更好地理解 Primer CSS 的选择表单，并在你的项目中使用它们。