Adding Borders to a Selected Radio Image

May 20, 2024

I had to restructure my code for a nested grid and now the border that indicates the selected radio is no longer showing up. I’m still new to all of this so I’m sure I’m just not referencing something correct, but I’ve tried every combination I can think of at the moment.

.course-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 94%;
  height: 94%;
  background-color: cyan;
  padding: 1.5%;
  grid-gap: 3%;
  margin: auto;
}

.course-container>div {
  display: flex;
  background: red;
  justify-content: center;
  align-items: center;
}

.course-container>div img {
  max-width: calc(100% - 10px);
  opacity: 80%;
  border: 5px solid transparent;
  &:hover {
    opacity: 100%;
    transition: opacity 100ms ease-in-out;
  }
}

.course-container input[type=radio]:checked+img {
  border: 5px solid salmon;
  background-color: salmon;
  opacity: 100%;
  mask-image: linear-gradient(135deg, transparent 4%, gold 0), linear-gradient(-135deg, transparent 4%, gold 0), linear-gradient(45deg, transparent 4%, gold 0), linear-gradient(-45deg, transparent 4%, gold 0);
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 51% 51%;
}

<div class="Thumbnail">
  <div class="course-container">
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Bowser-Castle-3" value="Bowser Castle 3" />
      <label for="Bowser-Castle-3">
                            <img src="images/courses/Bowser-Castle-3.png" alt='Bowser Castle 3'>
                        </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Donut-Plains-3" value="Donut Plains 3" />
      <label for="Donut-Plains-3">
                            <img src="images/courses/Donut-Plains-3.png" alt='Donut Plains 3'>
                        </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Mario-Circuit-3" value="Mario Circuit 3" />
      <label for="Mario-Circuit-3">
                            <img src="images/courses/Mario-Circuit-3.png" alt='Mario Circuit 3'>
                        </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Rainbow-Road-SNES" value="Rainbow Road - SNES" />
      <label for="Rainbow-Road-SNES">
                            <img src="images/courses/Rainbow-Road-SNES.png" alt='Rainbow Road - SNES'>
                        </label>
    </div>
  </div>

Here is a link to the GitHub repository

>Solution :

You need to target the img inside the label.

.course-container input[type=radio]:checked + label > img {...}

.course-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 94%;
  height: 94%;
  background-color: cyan;
  padding: 1.5%;
  grid-gap: 3%;
  margin: auto;
}

.course-container > div {
  display: flex;
  background: red;
  justify-content: center;
  align-items: center;
}

.course-container > div img {
  max-width: calc(100% - 10px);
  opacity: 80%;
  border: 5px solid transparent;
  &:hover {
    opacity: 100%;
    transition: opacity 100ms ease-in-out;
  }
}

.course-container input[type=radio]:checked + label > img {
  border: 5px solid salmon;
  background-color: salmon;
  opacity: 100%;
  mask-image: linear-gradient(135deg, transparent 4%, gold 0), linear-gradient(-135deg, transparent 4%, gold 0), linear-gradient(45deg, transparent 4%, gold 0), linear-gradient(-45deg, transparent 4%, gold 0);
  mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 51% 51%;
}

<div class="Thumbnail">
  <div class="course-container">
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Bowser-Castle-3" value="Bowser Castle 3" />
      <label for="Bowser-Castle-3">
                            <img src="images/courses/Bowser-Castle-3.png" alt='Bowser Castle 3'>
                        </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Donut-Plains-3" value="Donut Plains 3" />
      <label for="Donut-Plains-3">
                            <img src="images/courses/Donut-Plains-3.png" alt='Donut Plains 3'>
                        </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Mario-Circuit-3" value="Mario Circuit 3" />
      <label for="Mario-Circuit-3">
                            <img src="images/courses/Mario-Circuit-3.png" alt='Mario Circuit 3'>
                        </label>
    </div>
    <div class="course-thumbnail snesCourses">
      <input type="radio" name="course-thumbnail" id="Rainbow-Road-SNES" value="Rainbow Road - SNES" />
      <label for="Rainbow-Road-SNES">
                            <img src="images/courses/Rainbow-Road-SNES.png" alt='Rainbow Road - SNES'>
                        </label>
    </div>
  </div>