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

Works but need to next inputs inside labels if want no text

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-23 14:25:29 -07:00
parent 51f2656ad9
commit e9d104f078
2 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -77,18 +77,12 @@
</p> --> </p> -->
<p class="damage"> <p class="damage">
<span> <span>
<!-- <label> <input type="radio" name="d1" id="clear" checked>
</label> <label for="clear">lethal</label>
<label> <input type="radio" name="d1" id="bruise">
</label> <label for="bruise">clear</label>
<label> <input type="radio" name="d1" id="lethal">
</label> --> <label for="lethal">bruise</label>
<input type="radio" name="d1">
<!-- <label>label1</label> -->
<input type="radio" name="d1">
<!-- <label>label2</label> -->
<input type="radio" name="d1" checked>
<!-- <label>label3</label> -->
</span> </span>
</p> </p>
<p><span>Troop Number</span> 1</p> <p><span>Troop Number</span> 1</p>

34
style.css
View File

@ -95,24 +95,54 @@ input {
outline: 2px solid deeppink; outline: 2px solid deeppink;
} }
input + label {
border: 1px solid red;
display: none;
}
input:first-of-type { input:first-of-type {
outline: none; outline: none;
} }
label:first-of-type {
border: none;
display: inline;
}
input:checked { input:checked {
border: none; border: none;
outline: 2px solid deeppink; outline: 2px solid deeppink;
} }
input:has(+ input:checked) { input:checked + label {
border: 1px solid red;
display: none;
}
input:has(+ label + input:checked) {
border: none; border: none;
outline: 2px solid deeppink; outline: 2px solid deeppink;
} }
input[type="radio"]:checked + input { label:has(+ input:checked) {
border: 1px solid red;
display: none;
}
input[type="radio"]:checked + label + input {
outline: none; outline: none;
} }
input:checked + label + input + label {
border: none;
display: inline;
}
input {
position: absolute;
opacity: 0;
}
image#img1 { image#img1 {
transform: scale(3.41) rotate(-0.15deg); transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */ /* opacity: 0.33; */