- From: Jeroen Zwartepoorte via GitHub <sysbot+gh@w3.org>
- Date: Tue, 29 Mar 2022 13:50:24 +0000
- To: public-css-archive@w3.org
A checkbox web component:
- The input is slotted so it integrates with forms and labels
- The input is hidden and we use SVG to render a custom checkbox
- When the input has focus & focus-visible, the SVG should have a box-shadow
```html
<span class="box">
<slot name="input"></slot>
<svg>...</svg>
</span>
```
```css
:host(:focus-visible-within) svg {
box-shadow: ...;
}
```
Atm, the only solution I see is to use JS.
--
GitHub Notification of comment by jpzwarte
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3080#issuecomment-1081898154 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 29 March 2022 13:50:26 UTC