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

【问题标题】：Bulma styling of required attribute for input nested in label嵌套在标签中的输入所需属性的布尔玛样式
【发布时间】：2020-05-04 06:25:03
【问题描述】：

使用代码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。

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

查看浏览器开发工具，样式已应用于input :required，但由于标签样式隐藏了它，因此不可见。

这是 Bulma 的问题还是我只是遗漏了一些明显的东西？指针将不胜感激。

【问题讨论】：

错误都是我的（当然），因为表单的novalidate 属性阻止了验证。删除此属性会使浏览器验证正常工作，包括一些与 Bulma 外观和感觉完美契合的样式。

标签： html css bulma

【解决方案1】：

标签不支持required属性：

Label attributes

Inherited global attributes。

相反，您可以将 css 类 .required 添加到标签并将 css 更改为：

:required, .required { background: red; }

例子：

:required,
.required {
  background: red;
}

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css" rel="stylesheet"/>
<form action="" method="post" enctype="multipart/form-data" novalidate>
  <div class="field is-vertical">
    <label class="label required">Working file</label>
    <div id="id_file_to_work_on" class="file has-name is-fullwidth">
      <label class="file-label required">
        <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>

【讨论】：

谢谢。 'required' 不是标签的属性是一个有效的评论，我应该删除应用它的临时解决方法。只有输入元素的“必需”属性应该被尊重。