Closed jvanz closed 1 year ago
Adding custom checkboxes via a theme is simply impossible because of how CSS and the style settings plugins work in general. I'd recommend using this code as a starting point to add more checkboxes via custom CSS:
.anp-custom-checkboxes [data-task=c] > input[type=checkbox]:checked:after,
.anp-custom-checkboxes [data-task=c] > p > input[type=checkbox]:checked:after,
.anp-custom-checkboxes [data-task=c][type=checkbox]:checked:after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M313.4 479.1c26-5.2 42.9-30.5 37.7-56.5l-2.3-11.4c-5.3-26.7-15.1-52.1-28.8-75.2H464c26.5 0 48-21.5 48-48c0-25.3-19.5-46-44.3-47.9c7.7-8.5 12.3-19.8 12.3-32.1c0-23.4-16.8-42.9-38.9-47.1c4.4-7.3 6.9-15.8 6.9-24.9c0-21.3-13.9-39.4-33.1-45.6c.7-3.3 1.1-6.8 1.1-10.4c0-26.5-21.5-48-48-48H294.5c-19 0-37.5 5.6-53.3 16.1L202.7 73.8C176 91.6 160 121.6 160 153.7V192v48 24.9c0 29.2 13.3 56.7 36 75l7.4 5.9c26.5 21.2 44.6 51 51.2 84.2l2.3 11.4c5.2 26 30.5 42.9 56.5 37.7zM32 320H96c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64V288c0 17.7 14.3 32 32 32z'/%3E%3C/svg%3E");
-webkit-mask-size: 100%;
background-color: rgb(var(--ctp-red));
left: 0px;
}
.anp-custom-checkboxes [data-task=c] > input[type=checkbox]:checked:before,
.anp-custom-checkboxes [data-task=c] > p > input[type=checkbox]:checked:before,
.anp-custom-checkboxes [data-task=c][type=checkbox]:checked:before {
color: var(--checkbox-color);
margin: 0 3px;
position: absolute;
left: calc(var(--checkbox-size) * 1);
font-weight: bold;
}
.anp-custom-checkboxes [data-task=c] > input[type=checkbox]:checked,
anp-custom-checkboxes [data-task=c] > p > input[type=checkbox]:checked,
.anp-custom-checkboxes [data-task=c][type=checkbox]:checked {
--checkbox-color: transparent;
--checkbox-color-hover: transparent;
border-width: 0;
}
c
in this case) with the value you desire-webkit-mask-image
value with a url for an encoded SVG--ctp-red
with whatever color you wantPlease do note that this will take some knowledge of CSS and how SVGs work when embedded in CSS.
Feature Description I would like to define custom checkboxes with different icons. I'm not interesting in customizing the current checkbox icons. I would like to create complete new custom checkbox. For example, create a checkbox that when used
- [h]
the icon used is a heart.Additional context It would be nice to allow users to define additional icon for custom check boxes. This would allow user adopters of rapid logging to creating they own icons for their own meaning.