0

We use the following code 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,8l-.7.7,2.9,2.9,6.2-6.2-.7-.7Z" /></svg>') !important;
    border: none;
    cursor: pointer;    
}

This works in MS Edge: hovering over the checkbox displays a white rectangle with a blue border and a black arrow inside it. Sadly this is not working in Chrome and Firefox - the boxes are there (cursor changes and I even can click them) but they are not visible. When I remove the "rect" and there are "paths" only it's displayed correctly in every browser. Same result when adding for example a "circle" - checkbox not visible any more. I tried to add group tags inside the SVG and a lot of other things but I couldn't get the CB get displayed when there is at least one primitive like "rect". Am I missing something?

mmmato
  • 201
  • 2
  • 12
  • We use the plugin "iCheck" to style our checkboxes. What we did was replacing the "background: url(pathToAnImage)" with the one you see above (inline SVG). So the style gets attached to an "". – mmmato Sep 11 '19 at 14:36
  • I found a solution, see below. I did the mistake to write the colors as text in my original post but we're actually using hex codes and that was causing the problems. – mmmato Sep 11 '19 at 15:23

1 Answers1

0

OK, finally found the solution.

You have to replace the "#" in each hex color code with "%23" because Chrome and Firefox don't like the "#" any more.

mmmato
  • 201
  • 2
  • 12