I’m trying to create a layout with checkboxes using CSS Grid and Flexbox, but the checkboxes are rendering with inconsistent sizes in Chrome or blurry rendering in Firefox. I would like to understand the root cause of this issue and how to resolve it.
Below is a simplified version of my code, along with screenshots, to demonstrate the problem.
.form-filters-row { display: flex; font-size: 14px;}.checkboxes { display: grid; gap: 5px 10px;}.checkboxes > span { display: flex; align-items: center;}<div class="form-filters-row"><fieldset><legend>Category</legend><div class="checkboxes"><span><input type="checkbox" name="category[]" value="1"><label>Category 111</label></span><span><input type="checkbox" name="category[]" value="2"><label>C2 & Category 2</label></span><span><input type="checkbox" name="category[]" value="3"><label>34</label></span><span><input type="checkbox" name="category[]" value="4"><label>Category 43423</label></span><span><input type="checkbox" name="category[]" value="1"><label>Category 111</label></span><span><input type="checkbox" name="category[]" value="2"><label>C2 & Category 2</label></span><span><input type="checkbox" name="category[]" value="3"><label>34</label></span><span><input type="checkbox" name="category[]" value="4"><label>Category 43423</label></span></div></fieldset><div><fieldset><legend>In</legend><div class="checkboxes"><span><input type="checkbox" name="officein[]" value="all"><label>All</label></span><span><input type="checkbox" name="officein[]" value="53"><label>B1</label></span><span><input type="checkbox" name="officein[]" value="62"><label>B2</label></span><span><input type="checkbox" name="officein[]" value="63"><label>B3</label></span></div></fieldset><fieldset><legend>Current location</legend><div class="checkboxes"><span><input type="checkbox" name="office[]" value="all"><label>All</label></span><span><input type="checkbox" name="office[]" value="53"><label>B1</label></span><span><input type="checkbox" name="office[]" value="62"><label>B2</label></span><span><input type="checkbox" name="office[]" value="63"><label>B3</label></span><span><input type="checkbox" name="office[]" value="999"><label>B4</label></span></div></fieldset></div><fieldset><legend>Customer</legend><div class="checkboxes"><span><input type="checkbox" name="customer[]" value="1"><label>Private</label></span><span><input type="checkbox" name="customer[]" value="2"><label>Dealer</label></span><span><input type="checkbox" name="customer[]" value="5"><label>Agent</label></span><span><input type="checkbox" name="customer[]" value="6"><label>Company</label></span></div></fieldset></div>