State of CSS - Hackdot

Re:State of CSS by clairity on Friday October 21, 2022 @12:59PM (#33290335)

i believe the problem with form elements like checkboxes is that they are 'replaced elements', which the browser defers to the underlying operating system, and that's why it requires a "hack" like accent-color rather than direct styling. this is also why you can't use ::before and ::after on form elements (to do things like add a 'required' indicator using css only).

[ Parent | on HN ]

Re:State of CSS by easrng on Friday October 21, 2022 @05:33PM (#33293280)

IIRC they used to, but not anymore. They're implemented with a special Shadow DOM that's not accessible by the page but you can style some elements if the browser exposes them as psuedoelements.

[ Parent | on HN ]

Re:State of CSS by clairity on Friday October 21, 2022 @05:51PM (#33293411)

are OG form elements actually reimplemented in shadow DOM, like they're doing with open UI (https://open-ui.org/) custom elements?

i've seen safari and chrome (but not firefox) expose some form input components as shadow DOM (e.g., slots), but wasn't sure if it was actually reimplemented.

[ Parent | on HN ]

Re:State of CSS by easrng on Friday October 21, 2022 @10:00PM (#33294994)

Yep, there are settings to show them in the devtools for both Chrome and Firefox. You can't access them with JS though, you can only see them in the devtools.

[ Parent | on HN ]