[FR or HELP] Different types of checkboxes icons support outside of .markdown-source-view.mod-cm6

[tu2-atmanand]

This is a feature request as well as a more of a help, I need to have in my plugin.

I am not an expert in CSS and also after going through the Checkboxes CSS snippet, I have got a vague idea, and tried something myself.

What I am trying to do

I have developed a plugin, in which, I am displaying checkboxes inside a .view-content parent div of Obsidian. I realized the snippet only works for the checkboxes which are inside of a markdown view (either Live Editor or Reading mode). But I wanted to use the snippet in all the other places in Obsidian.

Here is how I am adding dynamic data-task attribute : TaskItem.tsx
Here is how I am changing the CSS of the specific checkboxes, only few checkboxes for now : Styles.css

What I expect

Based on my UI dev experience, I have done what I could as of now. The CSS is properly getting applied to the respective checkboxes. The only problem now is those Characters are not appearing as they should. I see only square box, as shown in below image :

I expected to see an exclamation character (❗) in the above checkbox for the following css : content: "\ec08";

But then I tried another method, which is working, except, the Icons will look a little different and I have to do the extra works of fixing the CSS, so the icons blends well with the checkbox : https://dev.to/beumsk/how-to-add-emoji-s-in-your-website-using-html-css-or-javascript-4g6g

I would really appreciate it if anyone could help me find out why the characters are not appearing. Or if there is any other method to achieve this. Or using the second method, how can I blend the icons well with the Checkbox.

Support from ITS Theme

I would love to know if its possible for ITS Theme to provide a support for providing these checkboxes Icons outside of .markdown-source-view.mod-cm6 as well. So, whichever plugin want to have this CSS applied to their Checkboxes, they can simply add the data-task attribute to the input element with the required value and the CSS will be applied directly.

[SlRvb]

Hmmm, my css only needs .task-list-item as the task class name with the data-task= in it and then the input to display the checkboxes correctly as I'm using obsidians task html structure. So typically it wouldn't actually use .markdown-source-view code unless absolutely necessary, it would actually try to use the .task-list-item as a default fallback as far as I understand 🤔

.markdown-source-view.mod-cm6 .task-list-item-checkbox[data-task="#{$checkbox}"],
.task-list-item.is-checked[data-task="#{$checkbox}"] > input[type=checkbox]:checked,
.task-list-item.is-checked[data-task="#{$checkbox}"] p > input[type=checkbox]:checked


.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task],
.task-list-item.is-checked:is([data-task="X"], ...)

If you replicate that, my css and others checkbox snippets should work 🤔

[tu2-atmanand]

Actually the idea was to either get the CSS directly from the theme, or preferably, to integrate the CSS in the plugin itself. So I was trying to figure out if I can somehow, put the whole snippet CSS inside my plugin's styles.css file.

But still, I tried adding the S-Checkboxes.css inside the CSS snippet folder and updating my code to :

<input
	type="checkbox"
	checked={(task.status === taskStatuses.checked || task.status === taskStatuses.regular || isChecked) ? true : false}
	className={`task-list-item${isChecked ? ' is-checked' : ''}`}
	data-task={task.status} // Add the data-task attribute
	onChange={handleMainCheckBoxClick}
/>

Corresponding CSS :

body:not(.alt-chkbx-off) .view-content .task-list-item-checkbox[data-task="!"]::after,
body:not(.alt-chkbx-off) .view-content .task-list-item.is-checked[data-task="!"]>input[type=checkbox]:checked::after,
body:not(.alt-chkbx-off) .view-content .task-list-item.is-checked[data-task="!"] p>input[type=checkbox]:checked::after {
	content: "\ec08";
	color: rgb(var(--chbx-i));
}

But this didn't work either, as I presume, the .view-content is the parent div.

Another observation : I must use the body:not(.alt-chkbx-off) at the beginning and ::after at the end, for the respective CSS to get applied properly. Same with the above CSS code.

[tu2-atmanand]

Ahh, the ITS Checkbox snippet itself worked, but still had to do some changes as per my parent components. I believe the issue of empty square boxes appearing inside the checkboxes (as per the image shown in the first comment), was solved due to the following CSS (but I might be wrong and some other CSS must had solved it) :

.taskItemCheckbox {
	background-color: transparent;
	font: var(--its);
	font-family: var(--its);
	font-size: inherit;
	font-weight: 10;
	text-align: center;
	border: 0;
	cursor: pointer;
	-webkit-mask-image: unset;
}

Following is the complete CSS which is working for me: Styles.css
(I know there is some CSS which is not necessary for the actual functionality)

Output :

Thanks, @SlRvb, for the points, it helped me to understand few things.

As there is always a room for improvement, open to hear any suggestions. Also, would love to discuss if it is possible to directly get this functionality directly from the theme, so there is no mismatch of Icons in future and the Icons will populate directly.

(As my original issue has been solved, and I am able to achieve what I expected, so this issue can be closed anytime)