Styling checkboxes on focus-visible

[mepatterson]

I'm trying to customize my shoelace components to match our design guide. With checkboxes, though, I'm struggling to come up with a way to adjust the border of the checkbox itself when the input is focus-visible

That is, we want this...

But I can only get it to this...

Any ideas? It seems like there's a complex CSS declaration about if the hidden <input> is focus-visible, it adds outline to the part(control) but I can't find a way to add a border-color change there. Any help is much appreciated!

[claviska]

Not sure what your hover/active states look like, but this should help.

sl-checkbox::part(control) {
  border-color: #181818;
  border-radius: 4px;
  outline-offset: 2px;
  --sl-focus-ring: solid 2px #2663ea;
}

sl-checkbox[checked]::part(control) {
  background-color: white;
  color: black;
}

Example:
https://codepen.io/claviska/pen/poLqqxj?editors=0100

Preview:

[mepatterson]

Right... so I definitely could do that. The trick is, our design is to have a lighter gray border when it's not hovered, and it turns black on hover. But as noted above, it should also stay black (regardless of hover state) when focus-visible. That's where I'm getting hung up.

[mepatterson]

Another way to explain it... here's our current native checkbox styling (via Tailwind) that I'm trying to match:

mr-2 h-4 w-4 rounded border-gray-300 bg-white shadow-none checked:border-gray-900 checked:bg-gray-900 
hover:border-gray-900 checked:hover:border-gray-700 checked:hover:bg-gray-700 
focus:border-gray-900 focus:text-gray-900 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 
focus-visible:ring-offset-2 required:focus:invalid:border-red-500 required:focus-visible:invalid:ring-red-500

[claviska]

The closest you'll be able to come without hacking it with JS is probably:

sl-checkbox:focus-within::part(control) {
  border-color: #181818;
}

But :focus-within is for regular focus and doesn't have :focus-visible behavior. I'm not sure how to expose focus visible behavior on parts that don't actually accept focus — we need a :focus-visible-within or something. In fact, I think this will become possible with :has().

Let me think on this a bit...if we can detect :focus-visible programmatically, perhaps through a combination of the focus event and a computed style, we can add part modifiers to let you target that state more easily.

[mepatterson]

Thanks, @claviska ! That's probably good enough for now to satisfy our design requirements.