ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Think I got it working with boxes instead of text??

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-23 14:59:27 -07:00
parent e9d104f078
commit 6ea86c77f5
2 changed files with 72 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@ -75,16 +75,34 @@
</label>
</span>
</p> -->
<p class="damage">
<!-- <p class="damage">
<span>
<input type="radio" name="d1" id="clear" checked>
<label for="clear">lethal</label>
<input type="radio" name="d1" id="bruise">
<label for="bruise">clear</label>
<input type="radio" name="d1" id="lethal">
<label for="lethal">bruise</label>
<input type="radio" name="d1" id="clear" checked>
<label for="clear">lethal</label>
<input type="radio" name="d1" id="bruise">
<label for="bruise">clear</label>
<input type="radio" name="d1" id="lethal">
<label for="lethal">bruise</label>
</span>
</p> -->
<p class="damage">
<!-- <span> -->
<label>
<input type="radio" name="d1" checked>
<span class="damage-selector lethal"></span>
</label>
<label>
<input type="radio" name="d1">
<span class="damage-selector clear"></span>
</label>
<label>
<input type="radio" name="d1">
<span class="damage-selector bruise"></span>
</label>
<!-- </span> -->
</p>
<p><span>Troop Number</span> 1</p>
<p><span>Primary Weapon Type</span> Rifle</p>
<ul>

50
style.css
View File

@ -82,15 +82,39 @@ line.ruler {
margin: 0;
}
.soldier-record p.damage span {
label span {
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid black;
}
.damage-selector.clear {
background-color: white;
}
.damage-selector.bruise {
background-color: orange;
}
.damage-selector.lethal {
background-color: red;
}
label {
display: block;
}
/* .soldier-record p.damage span {
display: inline-block;
}
.soldier-record p.damage span input {
display: block;
}
} */
input {
/* input {
border: none;
outline: 2px solid deeppink;
}
@ -141,6 +165,26 @@ input:checked + label + input + label {
input {
position: absolute;
opacity: 0;
} */
label span {
border-color: red;
}
label:first-of-type span {
border-color: black;
}
label:has(input:checked) span {
border-color: red;
}
label:has(+ label input:checked) span {
border-color: red;
}
label:has(input:checked) + label span {
border-color: black;
}
image#img1 {