From 23c143e034c9f04da07ee96731d7cd0e28edda4e Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Fri, 20 Nov 2020 16:25:34 +0100 Subject: Add focus-visible outline for checkboxes and radio buttons To make keyboard navigation visible in forms. When clicking with the mouse it doesn't appear. Signed-off-by: Vincent Petry --- core/css/inputs.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 4f73696d264..ca16ca55572 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -366,6 +366,12 @@ input { &:focus + label:before { border-color: var(--color-primary-element); } + &:focus-visible + label { + outline-style: solid; + outline-color: var(--color-primary-element); + outline-width: 1px; + outline-offset: 2px; + } &:checked + label:before, &.checkbox:indeterminate + label:before { /* ^ :indeterminate have a strange behavior on radio, -- cgit v1.2.3