Bulma styling of required attribute for input nested in label

Question

Using the code recommended by Bulma to define a file selection input form, styles for the required attribute will not be applied.

The form looks like this:

<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>

The CSS for the required attribute like this:

:required {
  background: red;
}

A respective JSFiddle exists.

Edit: required should not be a css class for the label but just an attribute for the input field, as described by W3 schools.

Looking at the Browser dev tools, the styling is applied to input :required, but isn't visible as the label styling hides it.

Is this an issue with Bulma or am I simply missing something obvious? A pointer would be appreciated.

Answer 1

Labels don't support required attribute:

Label attributes

Inherited global attributes.

Instead, You can add css class .required to the label and change your css to:

:required, .required { background: red; }

Example:

: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>