mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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 <vincent@nextcloud.com>
This commit is contained in:
Vincent Petry 2020-11-20 16:25:34 +01:00
parent b4ccadea2b
commit 23c143e034
No known key found for this signature in database
GPG Key ID: E055D6A4D513575C
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/css/inputs.scss
View File

@ -366,6 +366,12 @@ input {
&:focus + label:before { &:focus + label:before {
border-color: var(--color-primary-element); 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, &:checked + label:before,
&.checkbox:indeterminate + label:before { &.checkbox:indeterminate + label:before {
/* ^ :indeterminate have a strange behavior on radio, /* ^ :indeterminate have a strange behavior on radio,