Применение Bulma css к выпадающему меню Django

Как применить css из bulma к моему полю Django, которое является выпадающим меню, используя виджет=forms.Select.

Bulma CSS: с сайта bulma.io, их пример реализации:

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

Вот что я пробовал:

forms.py:

class PostModelForm(forms.ModelForm):

    STATUS=[
        ('live', 'Live'),
        ('draft', 'Draft'),
    ]
    
    status = forms.CharField(label='Status', widget=forms.Select(choices=STATUS))
    
    class Meta:
        model = Post
        fields = (
            'status',
        )

    def __init__(self, *args, **kwargs):
        super(PostModelForm, self).__init__(*args, **kwargs)
        self.fields['status'].widget.attrs.update({'class': 'dropdown-menu','id': 'dropdown-menu', 'role': 'menu'})

models.py

class Post(models.Model):
    status = models.CharField(default='draft', max_length=10)

post.html

<form method="post">

    {{ form.status.errors }}
    <p class="title">Status</p>
    <div class="dropdown is-active">
        <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
                <span>Select status</span>
                <span class="icon is-small">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
            </button>
        </div>
        {{ form.status }}
    </div>
    {% csrf_token %}

    <div class="control">
        <button type="submit" class="button">Submit</button>
    </div>
</form>

Дополнительная информация. Я сохранил форму короткой для вопроса, но я успешно реализовал другие поля с помощью bulma css подобным образом, примером может служить виджет загрузки файлов:

{{ form.photo.errors }}
<p class="title is-5 is-full mb-2 mt-4">Image</p>
<div id="file-js-example" class="file has-name is-fullwidth mb-4">
  <label class="file-label">
    {{ form.photo }}
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Image
      </span>
    </span>
    <span class="file-name">
      No image selected
    </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>

Я хочу сделать эквивалент для выпадающего меню. Я просто не уверен, какие элементы css нужно поместить в виджет формы.attrs и какие элементы bulma css нужно обернуть в мой {{ form.status }}, чтобы применить css. На данный момент я получаю два выпадающих меню, одно из bulma и одно из моего {{ form.status }}.

Спасибо

Обновление: Я получил выпадающий список, который работает и сохраняется в модели, единственное, что он отображается как обычная кнопка, поскольку я поместил класс кнопки в widget.attrs. Не уверен, как я могу расширить attrs, чтобы включить класс маленькой иконки стрелки вниз, чтобы она выглядела как выпадающая кнопка.

Стрелка вниз от бульмы: 

<span class="icon is-small">
    <i class="fas fa-angle-down" aria-hidden="true"></i>
</span>

Но это должно быть внутри кнопки, которую я определил в widget.attrs.

Текущий код, который заставляет работать выпадающий список, заключается в изменении attrs виджета:

forms.py:

self.fields['status'].widget.attrs.update({'class': 'button','aria-haspopup=': 'true', 'aria-controls': 'dropdown-menu'})

post.html

                {{ form.status.errors }}
                <p class="title">Status</p>
                <div class="dropdown is-active">
                    {{ form.status }}
                </div>

Я просто не уверен, как получить доступ к {{ form.status }}, чтобы вставить стрелку вниз в кнопку, или как добавить несколько классов в widget.attrs, чтобы иметь кнопку с классом иконки внутри класса кнопки.

Вернуться на верх