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 class="damage">
<span>
<!-- <label>
</label>
<label>
</label>
<label>
</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> -->
<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><span>Troop Number</span> 1</p>

34
style.css
View File

@ -95,24 +95,54 @@ input {
outline: 2px solid deeppink;
}
input + label {
border: 1px solid red;
display: none;
}
input:first-of-type {
outline: none;
}
label:first-of-type {
border: none;
display: inline;
}
input:checked {
border: none;
outline: 2px solid deeppink;
}
input:has(+ input:checked) {
input:checked + label {
border: 1px solid red;
display: none;
}
input:has(+ label + input:checked) {
border: none;
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;
}
input:checked + label + input + label {
border: none;
display: inline;
}
input {
position: absolute;
opacity: 0;
}
image#img1 {
transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */