note: the following descriptions are based on the examples included in the <<checkbox>> macro documentation.
If you use your web-browser's built-in Web Developer Tools to inspect the HTML elements generated by the macro you will see that it looks something like the following.
<input id="checkbox-pieblueberry" name="checkbox-pieblueberry" type="checkbox" tabindex="0" class="macro-checkbox">
.. and that the following CSS rules are being used to apply that element default styling.
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
input {
line-height: normal;
}
input, select, textarea {
color: #eee;
background-color: transparent;
border: 1px solid #444;
padding: .4em;
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input[type=checkbox], input[type=file], input[type=radio], select {
cursor: pointer;
}
The CSS selectors in the article you linked to assume that they are being applied to the following HTML structure, which is wrapping the 'checkbox' <input> element within a .checkbox classed parent <div> element, they also assume that the <label> element is a later sibling of the <input> element.
<div class="checkbox">
<input type="checkbox" id="checkbox_1">
<label for="checkbox_1">Pure CSS Checkbox</label>
</div>
So unless you have structured your Passage content like the following then all the above assumtions will be false, and this would be the reason why the CSS rules in the article aren't working.
<div class="checkbox">\
<<checkbox "$pieBlueberry" false true checked>>\
<label for="checkbox-pieblueberry">Blueberry?</label>\
</div>