2 files changed, 72 insertions, 10 deletions
diff --git a/index.html b/index.html
index 6dffb03..36594b0 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/style.css b/style.css
index ed68970..014ef85 100644
--- a/style.css
+++ b/style.css
@@ -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;
 }
 
-.soldier-record p.damage span input {
+.damage-selector.clear {
+  background-color: white;
+}
+
+.damage-selector.bruise {
+  background-color: orange;
+}
+
+.damage-selector.lethal {
+  background-color: red;
+}
+
+label {
   display: block;
 }
 
-input {
+/* .soldier-record p.damage span {
+  display: inline-block;
+}
+
+.soldier-record p.damage span input {
+  display: block;
+} */
+
+/* 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 {