嵌套在标签中的输入所需属性的布尔玛样式

Question

使用代码recommended by Bulma定义文件选择输入形式，将不会应用required属性的样式。

表格看起来像这样：

<form action="" method="post" enctype="multipart/form-data" novalidate>
  <div class="field is-vertical">
    <label class="label">Working file</label>
    <div id="id_file_to_work_on" class="file has-name is-fullwidth">
      <label class="file-label">
        <input type="file" name="file_to_work_on" class="file-input" required>
        <span class="file-cta">
          <span class="file-icon">
            <i class="fa fa-upload"></i>
          </span>
          <span class="file-label">
            Please select…
          </span>
        </span>
        <span class="file-name">
          Nothing selected, yet.
        </span>
      </label>
    </div>
  </div>
  <div class="field">
    <button type="submit" class="button is-primary" name="start_work">Go</button>
  </div>
</form>

所需属性的CSS，如下所示：

:required {
  background: red;
}

分别为JSFiddle exists。

Edit：required不应是标签的css类，而应该是输入字段的属性，如W3 schools所述。

[使用浏览器开发工具，样式应用于input :required，但由于标签样式将其隐藏而无法看到。

这是布尔玛的问题，还是我只是缺少明显的东西？指针将不胜感激。

Answer 1

标签不支持required属性：