Utilizing Bootstrap, I am faced with a challenge concerning Django crispy form with a checkbox. The HTML code appears as follows:
<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>
The issue arises when trying to adjust the CSS classes in accordance with this HTML structure. Unfortunately, the rendered checkbox remains entirely opaque and is not visible even after applying the following CSS styles:
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
}
... (CSS continues)
<p>To view examples of the desired style, visit <a href="http://seaff.microapps.com/" rel="nofollow noreferrer">Shopify embedded app css</a>.</p>
<p>Interestingly, the checkbox displays correctly when utilizing direct HTML output within a table row without Crispy forms:</p>
<pre><code><td>
<div class="checkbox-wrapper"><input class="checkbox" type="checkbox" id="id" name="" value="id"><span class="checkbox-styled"></span></div>
</td>