mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 04:53:36 +00:00
css: Restore keyboard accessibility to styled checkboxes.
This commit is contained in:
committed by
Tim Abbott
parent
ab89f40a66
commit
c4fee086a6
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user