css: Restore keyboard accessibility to styled checkboxes.

This commit is contained in:
Anders Kaseorg
2019-07-18 12:14:11 -07:00
committed by Tim Abbott
parent ab89f40a66
commit c4fee086a6

View File

@@ -8,7 +8,8 @@
vertical-align: top;
input[type=checkbox] {
display: none;
position: absolute;
clip: rect(0, 0, 0, 0);
~ span {
display: inline-block;
@@ -26,7 +27,6 @@
font-size: 1.3rem;
text-align: center;
border: 1px solid hsla(0, 0%, 0%, 0.6);
color: hsl(0, 0%, 80%);
border-radius: 4px;
-webkit-filter: brightness(0.80);
@@ -35,14 +35,17 @@
}
&:checked ~ span {
color: transparent;
background-image: url(/static/images/checkbox.svg);
background-size: 85%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
&:focus ~ span {
outline: 1px dotted;
outline: -webkit-focus-ring-color auto 5px;
}
&:disabled ~ span {
opacity: 0.50;
cursor: default;