This is the code we are using to style our checkboxes:
.checkbox-default {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect fill="#ffffff" stroke="blue" stroke-width="2" height="16" width="16" /><path fill="#000000" d="M6.7,10.3,4.5,8.1l-.7.7,2.9,2.9,6.2-6.2-.7-.7Z" /><path fill="#000000" d="M6.6,10.2,4.4,8,1.l.7,2.9,2.9,6.2-6.2-.7-.7.Z" /></svg>') !important;
border: none;
cursor: pointer;
}
In Microsoft Edge, hovering over the checkbox displays a white rectangle with a blue border and a black arrow inside it. Unfortunately, this styling does not work in Chrome or Firefox - the checkboxes are there (cursor changes and can be clicked) but they are not visible. When the "rect" tag is removed and only the "paths" remain, it is displayed correctly in all browsers. The same issue occurs when adding other primitives like a "circle" - the checkbox becomes invisible. Various attempts were made such as adding group tags inside the SVG, but the checkbox could not be displayed if there was at least one primitive shape like "rect". Is there something that I am missing?