For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/components/native-select.md.
  • 简体中文
  • v0.1.0
  • 原生选择器

    Live previewHTML · CSS · JavaScript

    用途

    Include CSS

    导入 Tailwind 和一个完整的 A3S UI 样式包。

    @import "tailwindcss";
    @import "@a3s-lab/ui/a3s.css";

    或者只导入基本CSS、原生选择CSS组件和一个样式包。

    @import "tailwindcss";
    @import "@a3s-lab/ui/base.css";
    @import "@a3s-lab/ui/components/native-select.css";
    @import "@a3s-lab/ui/styles/a3s.css";

    使用CDN或批量程序导入?请参见安装页

    Add your native select HTML

    Add class="select" to a native <select>. Use standard <option> and <optgroup> elements.

    <select class="select" aria-label="Fruit">
      <option value="">Select a fruit</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="blueberry">Blueberry</option>
      <option value="pineapple">Pineapple</option>
    </select>

    使用 Native Select 实现原生浏览器行为、表单集成和移动优化选择器。使用 Select 自定义选项内容、多选行为或 JavaScript API。

    示例

    Live previewHTML · CSS · JavaScript

    已禁用

    Live previewHTML · CSS · JavaScript

    无效

    Live previewHTML · CSS · JavaScript

    尺寸

    Live previewHTML · CSS · JavaScript

    RTL

    在选择元素或父元素上设置 dir="rtl"

    Live previewHTML · CSS · JavaScript