Django-如何将CSS应用于无线电模型表单集？

Question

我想在Django中自定义单选表单，但是由于formset是由Django渲染的方式，因此我无法操纵{{ field }}属性来手动渲染表单对于表单集的行为，我无法对其进行自定义。

如果我申请

{{ formset.management_form }}
{% for form in formset %}
    {% for field in form %}
        {{ field.html_name }}
    {% endfor %}
{% endfor %}

名称和ID的生成方式不允许我自由地操纵如何将数据传递回Django。

我一直在使用的CSS规则假定<input>标签和<label>标签彼此相邻，但是Django呈现表单的方式具有<input> <label>标记内的标记。这些是我正在使用的HTML规则

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{ 
    cursor: pointer;
}

input[type=checkbox], input[type=radio] {
    	display: none;
}

input[type=checkbox] + label:before {
  	font-family: "Font Awesome 5 Free";
   	display: inline-block;
   	content: "\f0c8"; /* Unicode for Font Awesome icons */
}

input[type=radio] + label:before {
   	font-family: "Font Awesome 5 Free";
   	margin-right: 10px;
   	display: inline-block;
   	content: "\f0c8"; /* Unicode for Font Awesome icons */
}

input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
   	content: "\f14a";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<form action="#">
  <p>
    <input type="radio" id="test1" name="radio-group" checked>
    <label for="test1">Yes</label>
  </p>
  <p>
    <input type="radio" id="test2" name="radio-group">
    <label for="test2">No</label>
  </p>
</form>

Django生成的HTML是：

<input name="model_set-TOTAL_FORMS" value="2" id="id_model_set-TOTAL_FORMS" type="hidden"><input name="model_set-INITIAL_FORMS" value="2" id="id_model_set-INITIAL_FORMS" type="hidden">
<input name="model_set-MIN_NUM_FORMS" value="0" id="id_model_set-MIN_NUM_FORMS" type="hidden">
<input name="model_set-MAX_NUM_FORMS" value="1000" id="id_model_set-MAX_NUM_FORMS" type="hidden">
<ul id="id_model_set-0-field" class="regular-radio">
  <li>
    <label for="id_model_set-0_field_0" style="color: black;">
      <input name="model_set-0-field" value="1" class="regular-radio" id="id_model_set-0_field_0" autocomplete="off" required="required" type="radio">
      Yes
    </label>
  </li>
  <li>
    <label for="id_model_set-0_field_1" style="color: black;">
      <input name="model_set-0-field" value="0" class="regular-radio" id="id_model_set-0_field_1" autocomplete="off" required="required" type="radio">
      No
    </label>
  </li>
</ul>
<input name="model_set-0-id" value="1" id="id_model_set-0-id" type="hidden">
<input name="model_set-0-parentmodel" value="1" id="id_model_set-0-parentmodel" type="hidden">
<ul id="id_model_set-1-field" class="regular-radio">
  <li>
    <label for="id_model_set-1_field_0" style="color: black;">
    <input name="model_set-1-field" value="1" class="regular-radio" id="id_model_set-1_field_0" autocomplete="off" required="required" type="radio">
    Yes
    </label>
  </li>
  <li>
    <label for="id_model_set-1_field_1" style="color: black;">
      <input name="model_set-1-field" value="0" class="regular-radio" id="id_model_set-1_field_1" autocomplete="off" required="required" type="radio">
    No
    </label>
  </li>
</ul>
<input name="model_set-1-id" value="2" id="id_model_set-1-id" type="hidden">
<input name="model_set-1-pico_values" value="1" id="id_model_set-1-parentmodel" type="hidden">

这是我在Django中渲染表单集的方式：

<li class="list-group-item outline">
    <div class="col">
    {{ formset.management_form }}
    {% for form in formset %}
        {{ form }}
    {% endfor %}
    </div>
</li>

如何将我想要的CSS规则应用于此渲染模板？