下载

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

赞助商

Password.link

文件上传

一个自定义的文件上传输入，无需 JavaScript

file 元素是一个简单的交互式标签，它包装了一个 <input type="file">。它包含几个子元素

  • file 主要容器
    • file-label 元素的实际交互式和可点击部分
      • file-input 本机文件输入，出于样式目的而隐藏
      • file-cta 上传号召性用语
        • file-icon 一个可选的上传图标
        • file-label “选择文件…” 文本
      • file-name 所选文件名称的容器

示例

HTML 

<div class="file">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Choose a file… </span>
    </span>
  </label>
</div>

修饰符 #

使用 has-name 修饰符结合 file-name 元素，您可以为所选的文件名添加一个占位符。 

<div class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Choose a file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

您可以使用 is-right 修饰符将 CTA 移至右侧。

<div class="file has-name is-right">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Choose a file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

您还可以使用 is-fullwidth 修饰符展开名称以填充空间。 

<div class="file has-name is-fullwidth">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Choose a file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

您可以使用 is-boxed 修饰符获得一个带框块。

<div class="file is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Choose a file… </span>
    </span>
  </label>
</div>

您可以组合 has-name 和 is-boxed。

<div class="file has-name is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Choose a file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

颜色 #

您可以通过附加0 个颜色修饰符之一来设置文件元素的样式

示例

HTML 

<div class="file is-primary">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Primary file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-info has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Info file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-warning is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-cloud-upload-alt"></i>
      </span>
      <span class="file-label"> Warning file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-danger has-name is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-cloud-upload-alt"></i>
      </span>
      <span class="file-label"> Danger file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

大小 #

您可以附加4 个可用大小之一

  • is-small
  • is-normal（默认）
  • is-medium
  • is-large

示例

HTML 

<div class="file is-small">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Small file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-normal">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Normal file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-medium">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Medium file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-large">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Large file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-small has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Small file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-normal has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Normal file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-medium has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Medium file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-large has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Large file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-small is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Small file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-normal is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Normal file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-medium is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Medium file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-large is-boxed">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Large file… </span>
    </span>
  </label>
</div>

示例

HTML 

<div class="file is-small is-boxed has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Small file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-normal is-boxed has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Normal file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-medium is-boxed has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Medium file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-large is-boxed has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Large file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

对齐 #

你可以对齐文件输入

  • 使用 is-centered 修饰符居中
  • 使用 is-right 修饰符右对齐

示例

HTML 

<div class="file is-centered is-boxed is-success has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Centered file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

示例

HTML 

<div class="file is-right is-info">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Right file… </span>
    </span>
    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
  </label>
</div>

JavaScript #

文件上传输入需要 JavaScript 来检索所选文件名。以下是如何完成此操作的一个示例

示例

HTML 

<div id="file-js-example" class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume" />
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label"> Choose a file… </span>
    </span>
    <span class="file-name"> No file uploaded </span>
  </label>
</div>

<script>
  const fileInput = document.querySelector("#file-js-example input[type=file]");
  fileInput.onchange = () => {
    if (fileInput.files.length > 0) {
      const fileName = document.querySelector("#file-js-example .file-name");
      fileName.textContent = fileInput.files[0].name;
    }
  };
</script>
Sass 变量
CSS 变量
值 
$file-radius
 
var(--bulma-file-radius)
 
var(--bulma-radius)
 
$file-cta-color
 
var(--bulma-)
 
var(--bulma-text)
 
$file-cta-hover-color
 
var(--bulma-)
 
var(--bulma-text-strong)
 
$file-cta-active-color
 
var(--bulma-)
 
var(--bulma-text-strong)
 
$file-name-border-color
 
var(--bulma-file-name-border-color)
 
var(--bulma-border)
 
$file-name-border-style
 
var(--bulma-file-name-border-style)
 
solid
 
$file-name-border-width
 
var(--bulma-file-name-border-width)
 
1px 1px 1px 0
 
$file-name-max-width
 
var(--bulma-file-name-max-width)
 
16em
 
$file-colors
 
var(--bulma-)
 
shared.$form-colors

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
值 
$file-radius
 
var(--bulma-file-radius)
 
var(--bulma-radius)
 
$file-cta-color
 
var(--bulma-)
 
var(--bulma-text)
 
$file-cta-hover-color
 
var(--bulma-)
 
var(--bulma-text-strong)
 
$file-cta-active-color
 
var(--bulma-)
 
var(--bulma-text-strong)
 
$file-name-border-color
 
var(--bulma-file-name-border-color)
 
var(--bulma-border)
 
$file-name-border-style
 
var(--bulma-file-name-border-style)
 
solid
 
$file-name-border-width
 
var(--bulma-file-name-border-width)
 
1px 1px 1px 0
 
$file-name-max-width
 
var(--bulma-file-name-max-width)
 
16em
 
$file-colors
 
var(--bulma-)
 
shared.$form-colors

如何支持 Bulma

一次性捐赠

访问我们的赞助商

每月捐款

成为赞助商
#native_company# #native_desc#
#native_cta#