通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻 项目构建教程学习 CSS。
下载

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

赞助

Route Planner and Route Optimizer

文件上传

一个自定义的 文件上传 输入框，无需 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 变量 #

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

如何支持 Bulma

一次性 捐赠

通过以下方式进行 浏览器测试

访问我们的 赞助商

每月 捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#
免费开始
免费开始