跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

选择组件

最后更新:

仅 CSS Tailwind CSS 选择下拉菜单，包含主要、次要、重音和语义颜色变体。尺寸 xs-xl，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

选择组件为用户提供了一个互斥选项的下拉列表，允许他们从预定义的集合中选择一个值。使用本机 HTML 选择元素构建并使用 Tailwind CSS 样式进行增强，选择支持多种尺寸、颜色和状态。选择下拉菜单可访问且可通过键盘导航，非常适合从大型选项列表、国家/地区选择和首选项面板中进行选择。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
select根据样式原生选择下拉菜单
select-soft风格柔和的有色背景
select-ghost风格No visible border until focused
select-dashed风格虚线边框样式
select-xs尺寸特小号
select-sm尺寸小的
select-md尺寸中（默认）
select-lg尺寸大的
select-xl尺寸特大号
select-2xl尺寸2×特大号
select-primary颜色Primary theme color border
select-secondary颜色Secondary theme color border
select-accent颜色Accent theme color border
select-neutral颜色Neutral theme color border
select-info颜色Info semantic color border
select-success颜色Success semantic color border
select-warning颜色Warning semantic color border
select-error颜色Error semantic color border

基本用法

1
2
3
4
5
6
<select class="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

1
2
3
4
5
6
<select className="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

选择尺码

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<select class="select select-xs">
  <option>Extra Small</option>
  <option selected>Select</option>
</select>

<select class="select select-sm">
  <option>Small</option>
  <option selected>Select</option>
</select>

<select class="select select-md">
  <option>Medium</option>
  <option selected>Select</option>
</select>

<select class="select select-lg">
  <option>Large</option>
  <option selected>Select</option>
</select>

<select class="select select-xl">
  <option>Extra Large</option>
  <option selected>Select</option>
</select>

<select class="select select-2xl">
  <option>2X Large</option>
  <option selected>Select</option>
</select>

选择颜色

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<select class="select">
  <option selected>Default</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-primary">
  <option selected>Primary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-secondary">
  <option selected>Secondary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-accent">
  <option selected>Accent</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-info">
  <option selected>Info</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-success">
  <option selected>Success</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-warning">
  <option selected>Warning</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-error">
  <option selected>Error</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

选择款式

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<select class="select">
  <option selected>Default Style</option>
  <option>Option 1</option>
</select>

<select class="select select-soft">
  <option selected>Soft</option>
  <option>Option 1</option>
</select>

<select class="select select-dashed">
  <option selected>Dashed</option>
  <option>Option 1</option>
</select>

<select class="select select-ghost">
  <option selected>Ghost</option>
  <option>Option 1</option>
</select>

禁用选择

html 
1
2
3
4
<select class="select" disabled>
  <option>Disabled Select</option>
  <option selected>Option 1</option>
</select>

使用标签选择

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<label>
  <span>Choose your favorite country</span>
  <select class="select select-outline w-full max-w-xs">
    <option disabled selected>Pick one</option>
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
    <option>Brazil</option>
  </select>
</label>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 选择 类名称和结构。不再有幻觉课程。

尝试Cherry MCP