将 css 样式从网站调整为 Django 脆皮表单复选框

Question

我正在使用引导程序，我有一个带有复选框的 Django 脆皮表单，html 如下所示：

    <div class="form-group">
        <div class="checkbox" id="div_id_include">
            <label class="" for="id_include"><input class="checkboxinput" id="id_include" name="include" type="checkbox"> Include some data.</label>
        </div>
    </div>

我在将以下 css 类适应此渲染的 html 时遇到问题，该复选框完全不透明，并且在应用以下 css 时不可见：

.CSS

.checkbox-wrapper {
position: relative;
}
td .checkbox-wrapper, th .checkbox-wrapper {
    margin: 0 0 0 6px;
}
.checkbox, input[type=checkbox].checkbox, .checkbox-styled {
    display: block;
    position: relative;
    height: 16px;
    width: 16px;
    border: 1px solid #d3dbe2;
    background-color: #ffffff;
    margin: 0;
    box-sizing: border-box;
    vertical-align: middle;
}
.checkbox, input[type=checkbox].checkbox {
    z-index: 2;
    opacity: 0
}
.checkbox-styled {
    border-radius: 3px;
    z-index: 1
}
.checkbox-styled:after {
    content: "";
    display: block;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: transparent;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out;
    z-index: 2
}
.checkbox:active ~ .checkbox-styled, .checkbox:focus ~ .checkbox-styled {
    border-color: #479ccf
}
.checkbox:checked ~ .checkbox-styled:after {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}
.checkbox:indeterminate ~ .checkbox-styled:after {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
    }
.checkbox-styled:after {
    background-image: url(data:image/svg+xml;charset=US-        ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23479ccf%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2.4%201.7%200l14.3-14c.5-.4.5-1.1%200-1.6z%22%2F%3E%3C%2Fsvg%3E)
}
.checkbox:indeterminate ~ .checkbox-styled:after {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20enable-background%3D%22new%200%200%2012%2012%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23479ccf%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M6%200%22%2F%3E%3Cpath%20d%3D%22M.8%207C.3%207%200%206.7%200%206.2v-.4c0-.5.3-.8.8-.8h10.5c.4%200%20.7.3.7.8v.5c0%20.4-.3.7-.8.7H.8z%22%2F%3E%3C%2Fsvg%3E)
}

样式来自这里： Shopify 嵌入式应用程序 css(您还可以在其中查看复选框的示例(。

如果我不使用 Crispy 表单但直接输出 html(在表格行内(时可以正常工作：

<td>
    <div class="checkbox-wrapper"><input class="checkbox" type="checkbox" id="id" name="" value="id"><span class="checkbox-styled"></span></div>
</td>

Answer 1

好吧，没有懒惰的方法可以做到这一点。我通过确保遵循我在帖子中引用的嵌入式应用程序 css 提供的 html 布局来解决此问题，然后为复选框自定义我的脆皮表单字段模板，以确保它以正确的布局呈现 html：

<div class="input-wrapper inline">
  <div class="checkbox-wrapper"><input class="checkbox" type="checkbox" id="check1" name="check1" value=""><span class="checkbox-styled"></span></div>
  <label for="check1">Check 1</label>
</div>