davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

radio buttons

Browse Source
This commit is contained in:
Jordan Scales
2020-04-17 14:36:38 -04:00
parent b464479c37
commit 38e958620b
6 changed files with 87 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
style.css
View File

@@ -11,6 +11,7 @@
/* Spacing */
--element-spacing: 8px;
--grouped-element-spacing: 4px;
--radio-label-spacing: 6px;
/* Borders */
--border-width: 1px;
@@ -169,3 +170,41 @@ legend {
.field-row-stacked * + * {
margin-top: var(--grouped-element-spacing);
}
label {
display: flex;
align-items: center;
}
input[type="radio"]:focus + label {
outline: 1px dotted #000000;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
}
input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: var(--radio-label-spacing);
background: url("./radio-border.svg");
}
input[type="radio"]:checked + label::after {
content: "";
display: block;
width: 4px;
height: 4px;
top: 4px;
left: 4px;
position: absolute;
background: url("./radio-dot.svg");
}
input[type="radio"][disabled] + label::before {
background: url("./radio-border-disabled.svg");
}
input[type="radio"][disabled]:checked + label::after {
background: url("./radio-dot-disabled.svg");
}