[Bug] tasklist 前面的 ✅ 无法在 Firefox 中显示

[ben-yip]

Checklist

• [X] I am using LTS version of Node.js.
• [X] I am using the latest v2 version of VuePress and VuePress official plugins.
• [X] I am using the latest v2 version of vuepress-theme-hope and all plugins in this repo.
• [X] I followed the docs and I double checked my configuration.
• [X] I have searched FAQ and I did not find the answer.

Package name

vuepress-theme-hope

Which operating system are you using?

• [X] macOS
• [ ] Windows
• [ ] Linux

Describe the bug

从规范来看，<input> 实际上并不支持 ::before 和 ::after。Chrome 支持应该只是一个 bug。在 Firefox 中就无效。因此在 Firefox 中并不能显示用伪元素构造的 ✅。要不换个方式实现一下？

Additional context

No response

[Mister-Hope]

从规范来看， 实际上并不支持 ::before 和 ::after

Any provement for what you are talking?

[Mister-Hope]

I've searched these, but none of them have any description:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
• https://www.w3.org/TR/CSS22/selector.html#pseudo-element-selectors
• https://www.w3.org/TR/CSS22/generate.html
• https://html.spec.whatwg.org/multipage/input.html#the-input-element

I only agree pseudo-elements that can not be used on replaced elements, and ONLY input[type=image] is one of them.

Here is detail about them:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

Where DID you find and spec about input[type=checkbox] can not have ::before and ::after?

[Mister-Hope]

I hope there are some real stuffs in your next reply, or you just waste me 15 minutes.

[ben-yip]

Put aside those specs, the task-list syntax in md-enhance plugin is just not rendered as expected in Firefox.

https://theme-hope.vuejs.press/guide/markdown/tasklist.html#demo

Firefox:

Chrome:

[Mister-Hope]

Please look carefully In your screen shot the marker is rendered as expected just with thewrong size

[Mister-Hope]

We just need to figure out why firefox choose to render the ::before element in the marker itself. This should be a bug with firefox and I personally refuse to give any fixes for a browser bug. But discussion about why this issue is happening is welcome in this thread

[github-actions[bot]]

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 3 days.

[Mister-Hope]

Does this issue still exist in latest firefox?

[ben-yip]

Does this issue still exist in latest firefox?

Not fixed yet.

Still, latest Firefox(119.0) is not rendering :before and :after of <input>s. While checkbox type input now shows a tick by browser user agent default, which greyed out as disabled(see screenshot below), not that overlying customized ✅ with accent color by the theme.

[Mister-Hope]

The workaround should at least showing a correct result, firefox does not allow to customize checkbox colors through css

[Mister-Hope]

Close as we have a valid work around while firefox doesn'thave any plan to fix this.