mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-29 13:46:31 +00:00
LibWeb: Implement <input type=checkbox switch> experimentally
In conformance with the requirements of the spec PR at https://github.com/whatwg/html/pull/9546, this change adds support for the “switch” attribute for type=checkbox “input” elements — which is shipping in Safari (since Safari 17.4). This change also implements support for exposing it to AT users with role=switch.
This commit is contained in:
parent
eee90f4aa2
commit
583ca6af89
Notes:
github-actions[bot]
2024-12-13 11:32:27 +00:00
Author: https://github.com/sideshowbarker
Commit: 583ca6af89
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2887
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/shannonbooth
16 changed files with 268 additions and 3 deletions
|
@ -857,3 +857,38 @@ progress {
|
|||
filter: invert(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* https://github.com/whatwg/html/pull/9546
|
||||
*/
|
||||
input[type=checkbox][switch] {
|
||||
appearance: none;
|
||||
height: 1em;
|
||||
width: 1.8em;
|
||||
vertical-align: middle;
|
||||
border-radius: 1em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: transparent;
|
||||
background-color: ButtonFace;
|
||||
}
|
||||
|
||||
input[type=checkbox][switch]::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: .46em solid Field;
|
||||
border-radius: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
input[type=checkbox][switch]:checked::before {
|
||||
left: calc(100% - .87em);
|
||||
}
|
||||
|
||||
input[type=checkbox][switch]:checked {
|
||||
background-color: AccentColor;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue