Bulma стиль обязательного атрибута для ввода, вложенного в метку - PullRequest
Новая
       42

Bulma стиль обязательного атрибута для ввода, вложенного в метку

0 голосов
/ 04 мая 2020

Используя код , рекомендованный Булмой для определения формы ввода выбора файла, стили для атрибута 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 существует .

Редактировать : required должен быть не css классом для метки, а просто атрибутом для поля ввода, как описано в W3 школ .

Если посмотреть на инструменты разработчика браузера, стиль применяется к input :required, но не отображается, так как стиль метки скрывает его.

Это проблема с Bulma или я просто упускаю что-то очевидное? Был бы признателен указатель.

1 Ответ

1 голос
/ 04 мая 2020

Метки не поддерживают атрибут required:

Атрибуты меток

Унаследованные глобальные атрибуты .

Вместо этого вы можете добавить css class .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>
...