文件输入

文件输入是一个用于上传文件的输入字段。

类名	类型
file-input	组件	用于 <input type="file"> 元素
file-input-ghost	样式	幽灵样式
file-input-neutral	颜色	中性颜色
file-input-primary	颜色	主要颜色
file-input-secondary	颜色	次要颜色
file-input-accent	颜色	强调色
file-input-info	颜色	信息色
file-input-success	颜色	成功色
file-input-warning	颜色	警告色
file-input-error	颜色	错误色
file-input-xs	尺寸	超小尺寸
file-input-sm	尺寸	小尺寸
file-input-md	尺寸	中等尺寸[默认]
file-input-lg	尺寸	大尺寸
file-input-xl	尺寸	超大尺寸

文件输入

<input type="file" class="$$file-input" />

<input type="file" class="$$file-input" />

            
                <input type="file" class="$$file-input" />

<input type="file" class="$$file-input" />

幽灵文件输入

<input type="file" class="$$file-input $$file-input-ghost" />

<input type="file" class="$$file-input $$file-input-ghost" />

            
                <input type="file" class="$$file-input $$file-input-ghost" />

<input type="file" class="$$file-input $$file-input-ghost" />

带有 fieldset 和 fieldset-label

选择一个文件最大尺寸 2MB

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$fieldset-label">Max size 2MB</label>
</fieldset>

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$fieldset-label">Max size 2MB</label>
</fieldset>

            
                <fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$fieldset-label">Max size 2MB</label>
</fieldset>

<fieldset class="$$fieldset">
  <legend class="$$fieldset-legend">Pick a file</legend>
  <input type="file" class="$$file-input" />
  <label class="$$fieldset-label">Max size 2MB</label>
</fieldset>

尺寸

<input type="file" class="$$file-input $$file-input-xs" />

<input type="file" class="$$file-input $$file-input-sm" />

<input type="file" class="$$file-input $$file-input-md" />

<input type="file" class="$$file-input $$file-input-lg" />

<input type="file" class="$$file-input $$file-input-xl" />

<input type="file" class="$$file-input $$file-input-xs" />

<input type="file" class="$$file-input $$file-input-sm" />

<input type="file" class="$$file-input $$file-input-md" />

<input type="file" class="$$file-input $$file-input-lg" />

<input type="file" class="$$file-input $$file-input-xl" />

            
                <input type="file" class="$$file-input $$file-input-xs" />

<input type="file" class="$$file-input $$file-input-sm" />

<input type="file" class="$$file-input $$file-input-md" />

<input type="file" class="$$file-input $$file-input-lg" />

<input type="file" class="$$file-input $$file-input-xl" />

<input type="file" class="$$file-input $$file-input-xs" />

<input type="file" class="$$file-input $$file-input-sm" />

<input type="file" class="$$file-input $$file-input-md" />

<input type="file" class="$$file-input $$file-input-lg" />

<input type="file" class="$$file-input $$file-input-xl" />

主要颜色

<input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

<input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

            
                <input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

<input type="file" class="$$file-input $$file-input-primary" />
<input type="file" class="$$file-input $$file-input-secondary" />
<input type="file" class="$$file-input $$file-input-accent" />
<input type="file" class="$$file-input $$file-input-neutral" />
<input type="file" class="$$file-input $$file-input-info" />
<input type="file" class="$$file-input $$file-input-success" />
<input type="file" class="$$file-input $$file-input-warning" />
<input type="file" class="$$file-input $$file-input-error" />

禁用

<input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

<input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

            
                <input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

<input type="file" placeholder="You can't touch this" class="$$file-input" disabled />

上一个字段集

下一个筛选器

您有问题吗？在 GitHub 上提问或 Discord 服务器

您发现错误了吗？在 GitHub 上打开一个 issue

您喜欢 daisyUI 吗？发帖宣传一下！

支持 daisyUI 的开发： Open Collective

在 GitHub 上编辑此页面

用于 AI 提示的文本版本

NEXUS
官方 daisyUI 仪表板模板

在 daisyUI 商店有售

更多详情

文件输入

文件输入

幽灵文件输入

带有 fieldset 和 fieldset-label

尺寸

主要颜色

禁用

NEXUS 官方 daisyUI 仪表板模板

在 daisyUI 商店有售

NEXUS
官方 daisyUI 仪表板模板