3 ms·

I like that the focus indicator is separated from the borders of the item, but this raises a problem. CSS doesn't have a way to add outlines separated from the

I like that the focus indicator is separated from the borders of the item, but this raises a problem. CSS doesn't have a way to add outlines separated from the element. This means you have to wrap all focusable elements, and use pseudo-selector :focus-within to create additional border with the wrapper element. Naturally creating wrapper elements to pass WCAG 2.1 is a pain, that should be solved in CSS itself.

extra88 5y ago
> CSS doesn't have a way to add outlines separated from the element. Maybe I'm not understanding what you mean but `outline-offset` is a property to set the distance between the element border and the outline (and you can use an negative value to make an inset outline, handy for situations like buttons without enough margin for an outline to appear without being cut off). You can also achieve a similar visual effect by having a box-shadow with two values, the larger one being your visible outline color and the smaller one matching the background color around the element. https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset https://developer.mozilla.org/en-US/docs/Web/CSS/outline-off...